npm - @nylas/web-elements - Versions diffs - 2.2.0 → 2.2.2 - Mend

@nylas/web-elements 2.2.0 → 2.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (202) hide show

package/dist/nylas-web-elements/index.esm.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{c as s}from"./index-BVtainOy.js";export{N as NylasIdentityRequestWrapper}from"./nylas-api-request-B1V2koVc.js";import"./index-B-KMpdMZ.js";import"./utils-Bj5Y75fX.js";const e=s({});export{e as NylasThemeStore};
+import{c as s}from"./index-BPPwIJj2.js";export{N as NylasIdentityRequestWrapper}from"./nylas-api-request-rYAjhY1J.js";import"./index-Cbn5rIwb.js";import"./utils-DhmCcrVs.js";const r=s({});export{r as NylasThemeStore};
 //# sourceMappingURL=index.esm.js.map

package/dist/nylas-web-elements/info-icon.entry.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{r as e,h as s}from"./index-B-KMpdMZ.js";const t=".sc-info-icon-h{display:flex}";const C=class{constructor(s){e(this,s);this.width="14";this.height="14"}render(){return s("svg",{key:"c696b28bb70a5a154123cbed8ee56ad418612ed8",width:this.width,height:this.height,fill:"none",xmlns:"http://www.w3.org/2000/svg"},s("path",{key:"91f34ea650a82fe34aea41a7c62b072498049a50",fill:"currentColor",d:"M6.5 5.5C6.77614 5.5 7 5.72386 7 6V9C7 9.27614 6.77614 9.5 6.5 9.5C6.22386 9.5 6 9.27614 6 9V6C6 5.72386 6.22386 5.5 6.5 5.5ZM6.50001 4.74907C6.91369 4.74907 7.24905 4.41371 7.24905 4.00003C7.24905 3.58635 6.91369 3.251 6.50001 3.251C6.08633 3.251 5.75098 3.58635 5.75098 4.00003C5.75098 4.41371 6.08633 4.74907 6.50001 4.74907ZM0.5 6.5C0.5 3.18629 3.18629 0.5 6.5 0.5C9.81371 0.5 12.5 3.18629 12.5 6.5C12.5 9.81371 9.81371 12.5 6.5 12.5C3.18629 12.5 0.5 9.81371 0.5 6.5ZM6.5 1.5C3.73858 1.5 1.5 3.73858 1.5 6.5C1.5 9.26142 3.73858 11.5 6.5 11.5C9.26142 11.5 11.5 9.26142 11.5 6.5C11.5 3.73858 9.26142 1.5 6.5 1.5Z"}))}};C.style=t;export{C as info_icon};
+import{r as e,h as s}from"./index-Cbn5rIwb.js";const t=".sc-info-icon-h{display:flex}";const C=class{constructor(s){e(this,s);this.width="14";this.height="14"}render(){return s("svg",{key:"c696b28bb70a5a154123cbed8ee56ad418612ed8",width:this.width,height:this.height,fill:"none",xmlns:"http://www.w3.org/2000/svg"},s("path",{key:"91f34ea650a82fe34aea41a7c62b072498049a50",fill:"currentColor",d:"M6.5 5.5C6.77614 5.5 7 5.72386 7 6V9C7 9.27614 6.77614 9.5 6.5 9.5C6.22386 9.5 6 9.27614 6 9V6C6 5.72386 6.22386 5.5 6.5 5.5ZM6.50001 4.74907C6.91369 4.74907 7.24905 4.41371 7.24905 4.00003C7.24905 3.58635 6.91369 3.251 6.50001 3.251C6.08633 3.251 5.75098 3.58635 5.75098 4.00003C5.75098 4.41371 6.08633 4.74907 6.50001 4.74907ZM0.5 6.5C0.5 3.18629 3.18629 0.5 6.5 0.5C9.81371 0.5 12.5 3.18629 12.5 6.5C12.5 9.81371 9.81371 12.5 6.5 12.5C3.18629 12.5 0.5 9.81371 0.5 6.5ZM6.5 1.5C3.73858 1.5 1.5 3.73858 1.5 6.5C1.5 9.26142 3.73858 11.5 6.5 11.5C9.26142 11.5 11.5 9.26142 11.5 6.5C11.5 3.73858 9.26142 1.5 6.5 1.5Z"}))}};C.style=t;export{C as info_icon};
 //# sourceMappingURL=info-icon.entry.js.map

package/dist/nylas-web-elements/input-color-picker.entry.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{r as e,a as r,h as a,e as l}from"./index-B-KMpdMZ.js";const o=':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%;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)}.color-picker-container{display:flex;height:48px;padding-left:16px;align-items:center;gap:8px;align-self:stretch;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-300);background:var(--nylas-base-0);width:-webkit-fill-available;color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:400;line-height:150%;width:-moz-available;width:-webkit-fill-available;padding-left:0;gap:0;overflow:hidden}.color-picker-container:focus{outline-color:var(--nylas-primary)}.color-picker-container.error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}.color-picker-container.error::placeholder{font-weight:400}.color-picker-container::placeholder{color:var(--nylas-base-300)}.color-picker-container input{display:flex;align-items:center;height:100%;appearance:none;border:none;border-right:1px solid var(--nylas-base-200);background:transparent}.color-picker-container input::-webkit-color-swatch{min-width:30px;border-radius:0.25rem;border:1px solid var(--nylas-base-200);margin:0.25rem}.color-picker-container input::-moz-color-swatch{min-width:30px;border-radius:0.25rem;border:1px solid var(--nylas-base-200);margin:0.25rem}.color-picker-container.error{border:1px solid var(--nylas-error)}.color-picker-container:hover,.color-picker-container:active{outline:1px solid var(--nylas-primary)}.color-picker-container:active{outline:2px solid var(--nylas-primary)}.color-picker-container label{width:100%}.labelBtn{color:var(--nylas-base-800);padding:14px;font-size:16px;font-family:var(--nylas-font-family);cursor:pointer;display:flex;flex-direction:row;justify-content:space-between;width:100%;gap:0.5rem;background:transparent;border:none}.labelBtn.error{border:1px solid var(--nylas-error)}.labelBtn.focus{background:transparent}.labelBtn:hover,.labelBtn:active{outline:1px solid var(--nylas-primary)}.labelBtn span.chevron{display:flex;align-self:center}.labelBtn span.open{transform:rotate(90deg)}.labelBtn span.closed{transform:rotate(270deg)}.labelBtn 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){.labelBtn span.selected-option{max-width:124px;font-size:16px}}';const n=class{constructor(a){e(this,a);this.nylasFormDropdownChanged=r(this,"nylasFormDropdownChanged",7);this.componentType="color-picker";this.selectedColor=this.defaultSelectedColor;this.isOpen=false;this.ariaActivedescendant="";this.errorMessage=""}componentWillLoad(){this.selectedColor=this.defaultSelectedColor;this.el.setAttribute("component-type",this.componentType)}handleFocus(){this.isOpen=true}handleBlur(){this.isOpen=false}handleInput(e){this.selectedColor=e.target.value}handleChange(e){this.selectedColor=e.target.value;this.nylasFormDropdownChanged.emit({value:this.selectedColor,name:this.name,error:this.errorMessage})}handleKeyDown(e){if(e.code==="Enter"||e.code==="Space"){e.preventDefault();this.inputRef?.click()}}handleOutsideClick(e){const r=e.composedPath();const a=r.includes(this.el);if(!a&&this.isOpen){this.isOpen=false}}render(){return a("div",{key:"94743c5c7068d8ae3e7d5e080ac9e86d3e6ccb65",class:"color-picker-container",part:"icp_color-picker",tabindex:"0",onKeyDown:e=>this.handleKeyDown(e)},a("input",{key:"ccf6acdf1ccf789bcc7a8fe4159935655786ab38",type:"color",ref:e=>this.inputRef=e,id:this.name,name:this.name,value:this.selectedColor,tabindex:"-1",onFocus:()=>this.handleFocus(),onBlur:()=>this.handleBlur(),onInput:e=>this.handleInput(e),onChange:e=>this.handleChange(e),onKeyDown:e=>this.handleKeyDown(e)}),a("label",{key:"09459cf70952dee8f0b791e86244ae89bf4c1617",part:"icp_color-picker-button",htmlFor:this.name,class:{labelBtn:true,open:this.isOpen,error:!!this.errorMessage},"aria-haspopup":"listbox","aria-expanded":this.isOpen?"true":"false","aria-label":this.name},a("span",{key:"acdbe9377ce74fc70cb9072656275e5bc39537d1",class:"selected-option",part:"icp_color-picker-button-selected-label"},this.selectedColor||"Select a color"),a("span",{key:"33b942e076138b8d75fe2736086b8416315c1235",class:{open:this.isOpen,closed:!this.isOpen,chevron:true},"aria-hidden":"true"},a("chevron-icon",{key:"04f3139317c518e1f70382ac192b5096fa9f6c9a",width:"16",height:"16"})),this.errorMessage&&a("span",{key:"4b381d0280331835da24695d1420a0589f3bc7e3",class:"error help-text"},this.errorMessage)))}get el(){return l(this)}};n.style=o;export{n as input_color_picker};
+import{r as e,a as r,h as a,e as l}from"./index-Cbn5rIwb.js";const o=':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%;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)}.color-picker-container{display:flex;height:48px;padding-left:16px;align-items:center;gap:8px;align-self:stretch;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-300);background:var(--nylas-base-0);width:-webkit-fill-available;color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:400;line-height:150%;width:-moz-available;width:-webkit-fill-available;padding-left:0;gap:0;overflow:hidden}.color-picker-container:focus{outline-color:var(--nylas-primary)}.color-picker-container.error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}.color-picker-container.error::placeholder{font-weight:400}.color-picker-container::placeholder{color:var(--nylas-base-300)}.color-picker-container input{display:flex;align-items:center;height:100%;appearance:none;border:none;border-right:1px solid var(--nylas-base-200);background:transparent}.color-picker-container input::-webkit-color-swatch{min-width:30px;border-radius:0.25rem;border:1px solid var(--nylas-base-200);margin:0.25rem}.color-picker-container input::-moz-color-swatch{min-width:30px;border-radius:0.25rem;border:1px solid var(--nylas-base-200);margin:0.25rem}.color-picker-container.error{border:1px solid var(--nylas-error)}.color-picker-container:hover,.color-picker-container:active{outline:1px solid var(--nylas-primary)}.color-picker-container:active{outline:2px solid var(--nylas-primary)}.color-picker-container label{width:100%}.labelBtn{color:var(--nylas-base-800);padding:14px;font-size:16px;font-family:var(--nylas-font-family);cursor:pointer;display:flex;flex-direction:row;justify-content:space-between;width:100%;gap:0.5rem;background:transparent;border:none}.labelBtn.error{border:1px solid var(--nylas-error)}.labelBtn.focus{background:transparent}.labelBtn:hover,.labelBtn:active{outline:1px solid var(--nylas-primary)}.labelBtn span.chevron{display:flex;align-self:center}.labelBtn span.open{transform:rotate(90deg)}.labelBtn span.closed{transform:rotate(270deg)}.labelBtn 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){.labelBtn span.selected-option{max-width:124px;font-size:16px}}';const n=class{constructor(a){e(this,a);this.nylasFormDropdownChanged=r(this,"nylasFormDropdownChanged",7);this.componentType="color-picker";this.selectedColor=this.defaultSelectedColor;this.isOpen=false;this.ariaActivedescendant="";this.errorMessage=""}componentWillLoad(){this.selectedColor=this.defaultSelectedColor;this.el.setAttribute("component-type",this.componentType)}handleFocus(){this.isOpen=true}handleBlur(){this.isOpen=false}handleInput(e){this.selectedColor=e.target.value}handleChange(e){this.selectedColor=e.target.value;this.nylasFormDropdownChanged.emit({value:this.selectedColor,name:this.name,error:this.errorMessage})}handleKeyDown(e){if(e.code==="Enter"||e.code==="Space"){e.preventDefault();this.inputRef?.click()}}handleOutsideClick(e){const r=e.composedPath();const a=r.includes(this.el);if(!a&&this.isOpen){this.isOpen=false}}render(){return a("div",{key:"94743c5c7068d8ae3e7d5e080ac9e86d3e6ccb65",class:"color-picker-container",part:"icp_color-picker",tabindex:"0",onKeyDown:e=>this.handleKeyDown(e)},a("input",{key:"ccf6acdf1ccf789bcc7a8fe4159935655786ab38",type:"color",ref:e=>this.inputRef=e,id:this.name,name:this.name,value:this.selectedColor,tabindex:"-1",onFocus:()=>this.handleFocus(),onBlur:()=>this.handleBlur(),onInput:e=>this.handleInput(e),onChange:e=>this.handleChange(e),onKeyDown:e=>this.handleKeyDown(e)}),a("label",{key:"09459cf70952dee8f0b791e86244ae89bf4c1617",part:"icp_color-picker-button",htmlFor:this.name,class:{labelBtn:true,open:this.isOpen,error:!!this.errorMessage},"aria-haspopup":"listbox","aria-expanded":this.isOpen?"true":"false","aria-label":this.name},a("span",{key:"acdbe9377ce74fc70cb9072656275e5bc39537d1",class:"selected-option",part:"icp_color-picker-button-selected-label"},this.selectedColor||"Select a color"),a("span",{key:"33b942e076138b8d75fe2736086b8416315c1235",class:{open:this.isOpen,closed:!this.isOpen,chevron:true},"aria-hidden":"true"},a("chevron-icon",{key:"04f3139317c518e1f70382ac192b5096fa9f6c9a",width:"16",height:"16"})),this.errorMessage&&a("span",{key:"4b381d0280331835da24695d1420a0589f3bc7e3",class:"error help-text"},this.errorMessage)))}get el(){return l(this)}};n.style=o;export{n as input_color_picker};
 //# sourceMappingURL=input-color-picker.entry.js.map

package/dist/nylas-web-elements/input-component.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-component.entry.esm.js","sources":["src/components/design-system/input-component/input-component.scss?tag=input-component&encapsulation=shadow","src/components/design-system/input-component/input-component.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n@use '../../../common/mixins/inputs' as ;\n\n:host {\n display: block;\n height: auto;\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\n p {\n margin: 0;\n }\n\n .error {\n color: var(--nylas-error);\n }\n}\n\n.input_wrapper {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\ninput[type='text'],\ninput[type='number'],\ninput[type='email'],\ninput[type='phone_number'] {\n @include textfield;\n width: -moz-available;\n width: -webkit-fill-available;\n}\n\ninput:read-only {\n background-color: var(--nylas-base-100);\n cursor: not-allowed;\n}","import { Component, h, Prop, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\nimport { sanitize } from '@/utils/utils';\nimport { ThemeConfig } from '@nylas/core';\n\nconst DefaultPattern = {\n email: /^[a-zA-Z0-9.!#$%&'+/=?^_`{\|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)$/,\n phone_number: /^\\+?\\d{1,15}$/,\n};\n\nconst DefaultPlaceholder = {\n email: 'name@example.com',\n phone_number: '1234567890',\n};\n\n/*\n The `input-component` component is a UI component that allows users to input text, email, or phone number values.\n * This component is used in the scheduling form to input text, email and phone number type inputs.\n /\n\n@Component({\n tag: 'input-component',\n styleUrl: 'input-component.scss',\n shadow: true,\n})\nexport class InputComponent {\n /\n The host element\n /\n @Element() el!: HTMLElement;\n /\n The name of the input. This is used to identify the input when submitting a form.\n /\n @Prop() name: string = 'input';\n /\n The default value of the input. This is the value that is displayed when the input is rendered.\n /\n @Prop() defaultValue?: string;\n /\n The label of the input. This is displayed above the input.\n /\n @Prop() label: string = '';\n /\n The type of the input. This is used to determine the input's behavior.\n * Supported types are 'text', 'email', and 'phone_number'.\n /\n @Prop() type: 'text' \| 'email' \| 'phone_number' \| 'number' = 'text';\n /\n The placeholder of the input. This is displayed when the input is empty.\n /\n @Prop() placeholder: string = DefaultPlaceholder[this.type];\n /\n Whether the input is required. If true, the input must have a value when submitting a form.\n * Default is false. If the input is required and the value is empty, an error message is displayed.\n /\n @Prop() required: boolean = false;\n /\n Whether the input is read-only. If true, the input cannot be edited.\n * Default is false.\n /\n @Prop() readOnly: boolean = false;\n /\n Whether the input should be focused when rendered.\n * Default is false. If true, the input is focused when rendered.\n * Use this to set the focus on the first input in a form.\n /\n @Prop() autoFocus: boolean = false;\n /\n The pattern to validate the input value. If the value does not match the pattern, an error message is displayed.\n * Default is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'phone_number'.\n /\n @Prop() pattern?: RegExp;\n /\n The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed.\n * Default is 255.\n /\n @Prop() maxLength: number = 255;\n /\n The error message to display when the value does not match the pattern.\n * Default is 'Invalid <field> format.' where <field> is the input label.\n /\n @Prop() patternError: string = '';\n\n /\n This error message is displayed when the input value is empty and the input is required.\n /\n @Prop() requiredError: string = '';\n @Prop() maxValue?: number; // Optional max value for 'number'\n @Prop() minValue?: number; // Optional min value for 'number'\n\n /\n The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /\n The input value state.\n /\n @State() value!: string;\n /\n The error message state.\n /\n @State() error: string = '';\n\n /\n This event is fired when the input value is changed.\n * The scheduling form listens for this event to validate the input value and submit the form.\n * If using outside of the scheduling form, listen for this event to validate the input value\n * and handle the input value change.\n /\n @Event() nylasFormInputChanged!: EventEmitter<{\n value: string;\n name: string;\n label: string;\n type: string;\n error: string;\n }>;\n\n @Event() nylasFormInputFocused!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n @Event() nylasFormInputBlurred!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n // Lifecycle methods\n @Watch('defaultValue')\n handleDefaultValueChange(newValue: string) {\n this.value = sanitize(newValue);\n if (this.value) {\n this.validatePattern(this.value);\n }\n }\n\n @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 componentDidLoad() {\n this.value = sanitize(this.defaultValue \|\| '');\n if (this.type !== 'text' && !this.pattern) {\n this.pattern = DefaultPattern[this.type];\n }\n\n if (this.value) {\n this.validatePattern(this.value);\n }\n this.applyThemeConfig(this.themeConfig);\n }\n\n // Event listeners\n /\n Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n /\n @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n this.validatePattern(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n @Listen('formSubmitted', { target: 'document' })\n async handleFormSubmitted(event: CustomEvent) {\n if (this.el?.getAttribute('data-page-styling')) {\n this.validatePattern(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n }\n\n // Methods\n handleInput(e: Event) {\n this.error = '';\n const inputValue = (e.target as HTMLInputElement).value;\n\n // For 'number', ensure the value is valid\n if (this.type === 'number') {\n const numericValue = parseFloat(inputValue);\n if ((this.maxValue !== undefined && numericValue > this.maxValue) \|\| (this.minValue !== undefined && numericValue < this.minValue)) {\n if (this.minValue === undefined) {\n this.error = `Value must be less than ${this.maxValue}`;\n } else if (this.maxValue === undefined) {\n this.error = `Value must be greater than ${this.minValue}`;\n } else {\n this.error = `Value must be between ${this.minValue} and ${this.maxValue}`;\n }\n } else if (isNaN(numericValue)) {\n this.error = this.patternError \|\| 'Invalid format.';\n }\n }\n\n this.value = sanitize(inputValue);\n this.nylasFormInputChanged.emit({\n value: this.value,\n name: this.name,\n label: this.label,\n error: this.error,\n type: this.type,\n });\n }\n\n handleBlur() {\n this.nylasFormInputBlurred.emit({\n value: this.value,\n name: this.name,\n });\n }\n\n handleFocus() {\n this.nylasFormInputFocused.emit({\n value: this.value,\n name: this.name,\n });\n }\n\n validatePattern(value: string) {\n // Reset error\n this.error = '';\n\n if (this.required && !value) {\n this.error = this.requiredError \|\| 'This field is required.';\n return;\n }\n\n if (this.type === 'number' && value) {\n const numericValue = parseFloat(value);\n if ((this.maxValue !== undefined && numericValue > this.maxValue) \|\| (this.minValue !== undefined && numericValue < this.minValue)) {\n this.error = `Value must be between ${this.minValue} and ${this.maxValue}`;\n return;\n }\n }\n\n if (this.pattern && value && !this.pattern.test(value)) {\n this.error = this.patternError \|\| 'Invalid format.';\n }\n }\n\n render() {\n return (\n <label part={this.error ? 'ic__label ic__label--error' : 'ic__label'} class={{ error: !!this.error }}>\n {this.label && (\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\"></span>}\n </p>\n )}\n <div part=\"ic__input_wrapper\" class=\"input_wrapper\">\n <input\n type={this.type}\n name={this.name}\n part={this.error ? 'ic__input ic__input--error' : 'ic__input'}\n title={this.readOnly ? 'read-only field' : undefined}\n readOnly={this.readOnly}\n autoFocus={this.autoFocus}\n value={this.value}\n maxLength={this.maxLength}\n max={this.type === 'number' ? this.maxValue : undefined}\n min={this.type === 'number' ? this.minValue : undefined}\n placeholder={this.placeholder}\n class={{ error: !!this.error }}\n onInput={e => this.handleInput(e)}\n onFocus={() => this.handleFocus()}\n onBlur={() => this.handleBlur()}\n />\n <slot name=\"additional-input\"></slot>\n </div>\n {this.error && (\n <span class=\"error help-text\" part=\"ic__error_message\">\n {this.error}\n </span>\n )}\n </label>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"input-component.entry.esm.js","sources":["src/components/design-system/input-component/input-component.scss?tag=input-component&encapsulation=shadow","src/components/design-system/input-component/input-component.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n@use '../../../common/mixins/inputs' as ;\n\n:host {\n display: block;\n height: auto;\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\n p {\n margin: 0;\n }\n\n .error {\n color: var(--nylas-error);\n }\n}\n\n.input_wrapper {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\ninput[type='text'],\ninput[type='number'],\ninput[type='email'],\ninput[type='phone_number'] {\n @include textfield;\n width: -moz-available;\n width: -webkit-fill-available;\n}\n\ninput:read-only {\n background-color: var(--nylas-base-100);\n cursor: not-allowed;\n}","import { Component, h, Prop, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\nimport { sanitize } from '@/utils/utils';\nimport { ThemeConfig } from '@nylas/core';\n\nconst DefaultPattern = {\n email: /^[a-zA-Z0-9.!#$%&'+/=?^_`{\|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)$/,\n phone_number: /^\\+?\\d{1,15}$/,\n};\n\nconst DefaultPlaceholder = {\n email: 'name@example.com',\n phone_number: '1234567890',\n};\n\n/*\n The `input-component` component is a UI component that allows users to input text, email, or phone number values.\n * This component is used in the scheduling form to input text, email and phone number type inputs.\n /\n\n@Component({\n tag: 'input-component',\n styleUrl: 'input-component.scss',\n shadow: true,\n})\nexport class InputComponent {\n /\n The host element\n /\n @Element() el!: HTMLElement;\n /\n The name of the input. This is used to identify the input when submitting a form.\n /\n @Prop() name: string = 'input';\n /\n The default value of the input. This is the value that is displayed when the input is rendered.\n /\n @Prop() defaultValue?: string;\n /\n The label of the input. This is displayed above the input.\n /\n @Prop() label: string = '';\n /\n The type of the input. This is used to determine the input's behavior.\n * Supported types are 'text', 'email', and 'phone_number'.\n /\n @Prop() type: 'text' \| 'email' \| 'phone_number' \| 'number' = 'text';\n /\n The placeholder of the input. This is displayed when the input is empty.\n /\n @Prop() placeholder: string = DefaultPlaceholder[this.type];\n /\n Whether the input is required. If true, the input must have a value when submitting a form.\n * Default is false. If the input is required and the value is empty, an error message is displayed.\n /\n @Prop() required: boolean = false;\n /\n Whether the input is read-only. If true, the input cannot be edited.\n * Default is false.\n /\n @Prop() readOnly: boolean = false;\n /\n Whether the input should be focused when rendered.\n * Default is false. If true, the input is focused when rendered.\n * Use this to set the focus on the first input in a form.\n /\n @Prop() autoFocus: boolean = false;\n /\n The pattern to validate the input value. If the value does not match the pattern, an error message is displayed.\n * Default is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'phone_number'.\n /\n @Prop() pattern?: RegExp;\n /\n The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed.\n * Default is 255.\n /\n @Prop() maxLength: number = 255;\n /\n The error message to display when the value does not match the pattern.\n * Default is 'Invalid <field> format.' where <field> is the input label.\n /\n @Prop() patternError: string = '';\n\n /\n This error message is displayed when the input value is empty and the input is required.\n /\n @Prop() requiredError: string = '';\n @Prop() maxValue?: number; // Optional max value for 'number'\n @Prop() minValue?: number; // Optional min value for 'number'\n\n /\n The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /\n The input value state.\n /\n @State() value!: string;\n /\n The error message state.\n /\n @State() error: string = '';\n\n /\n This event is fired when the input value is changed.\n * The scheduling form listens for this event to validate the input value and submit the form.\n * If using outside of the scheduling form, listen for this event to validate the input value\n * and handle the input value change.\n /\n @Event() nylasFormInputChanged!: EventEmitter<{\n value: string;\n name: string;\n label: string;\n type: string;\n error: string;\n }>;\n\n @Event() nylasFormInputFocused!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n @Event() nylasFormInputBlurred!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n // Lifecycle methods\n @Watch('defaultValue')\n handleDefaultValueChange(newValue: string) {\n this.value = sanitize(newValue);\n if (this.value) {\n this.validatePattern(this.value);\n }\n }\n\n @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 componentWillLoad() {\n this.applyThemeConfig(this.themeConfig);\n }\n\n componentDidLoad() {\n this.value = sanitize(this.defaultValue \|\| '');\n if (this.type !== 'text' && !this.pattern) {\n this.pattern = DefaultPattern[this.type];\n }\n\n if (this.value) {\n this.validatePattern(this.value);\n }\n this.applyThemeConfig(this.themeConfig);\n }\n\n // Event listeners\n /\n Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n /\n @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n this.validatePattern(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n @Listen('formSubmitted', { target: 'document' })\n async handleFormSubmitted(event: CustomEvent) {\n if (this.el?.getAttribute('data-page-styling')) {\n this.validatePattern(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n }\n\n // Methods\n handleInput(e: Event) {\n this.error = '';\n const inputValue = (e.target as HTMLInputElement).value;\n\n // For 'number', ensure the value is valid\n if (this.type === 'number') {\n const numericValue = parseFloat(inputValue);\n if ((this.maxValue !== undefined && numericValue > this.maxValue) \|\| (this.minValue !== undefined && numericValue < this.minValue)) {\n if (this.minValue === undefined) {\n this.error = `Value must be less than ${this.maxValue}`;\n } else if (this.maxValue === undefined) {\n this.error = `Value must be greater than ${this.minValue}`;\n } else {\n this.error = `Value must be between ${this.minValue} and ${this.maxValue}`;\n }\n } else if (isNaN(numericValue)) {\n this.error = this.patternError \|\| 'Invalid format.';\n }\n }\n\n this.value = sanitize(inputValue);\n this.nylasFormInputChanged.emit({\n value: this.value,\n name: this.name,\n label: this.label,\n error: this.error,\n type: this.type,\n });\n }\n\n handleBlur() {\n this.nylasFormInputBlurred.emit({\n value: this.value,\n name: this.name,\n });\n }\n\n handleFocus() {\n this.nylasFormInputFocused.emit({\n value: this.value,\n name: this.name,\n });\n }\n\n validatePattern(value: string) {\n // Reset error\n this.error = '';\n\n if (this.required && !value) {\n this.error = this.requiredError \|\| 'This field is required.';\n return;\n }\n\n if (this.type === 'number' && value) {\n const numericValue = parseFloat(value);\n if ((this.maxValue !== undefined && numericValue > this.maxValue) \|\| (this.minValue !== undefined && numericValue < this.minValue)) {\n this.error = `Value must be between ${this.minValue} and ${this.maxValue}`;\n return;\n }\n }\n\n if (this.pattern && value && !this.pattern.test(value)) {\n this.error = this.patternError \|\| 'Invalid format.';\n }\n }\n\n render() {\n return (\n <label part={this.error ? 'ic__label ic__label--error' : 'ic__label'} class={{ error: !!this.error }}>\n {this.label && (\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\"></span>}\n </p>\n )}\n <div part=\"ic__input_wrapper\" class=\"input_wrapper\">\n <input\n type={this.type}\n name={this.name}\n part={this.error ? 'ic__input ic__input--error' : 'ic__input'}\n title={this.readOnly ? 'read-only field' : undefined}\n readOnly={this.readOnly}\n autoFocus={this.autoFocus}\n value={this.value}\n maxLength={this.maxLength}\n max={this.type === 'number' ? this.maxValue : undefined}\n min={this.type === 'number' ? this.minValue : undefined}\n placeholder={this.placeholder}\n class={{ error: !!this.error }}\n onInput={e => this.handleInput(e)}\n onFocus={() => this.handleFocus()}\n onBlur={() => this.handleBlur()}\n />\n <slot name=\"additional-input\"></slot>\n </div>\n {this.error && (\n <span class=\"error help-text\" part=\"ic__error_message\">\n {this.error}\n </span>\n )}\n </label>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/nylas-web-elements/input-component.entry.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{r as e,a,h as s,e as l}from"./index-B-KMpdMZ.js";import{n as r}from"./utils-Bj5Y75fX.js";const t=':host{display:block;height:auto;--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%}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)}.input_wrapper{display:flex;align-items:center;gap:1rem}input[type=text],input[type=number],input[type=email],input[type=phone_number]{display:flex;height:48px;padding-left:16px;align-items:center;gap:8px;align-self:stretch;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-300);background:var(--nylas-base-0);width:-webkit-fill-available;color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:400;line-height:150%;width:-moz-available;width:-webkit-fill-available}input[type=text]:focus,input[type=number]:focus,input[type=email]:focus,input[type=phone_number]:focus{outline-color:var(--nylas-primary)}input[type=text].error,input[type=number].error,input[type=email].error,input[type=phone_number].error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}input[type=text].error::placeholder,input[type=number].error::placeholder,input[type=email].error::placeholder,input[type=phone_number].error::placeholder{font-weight:400}input[type=text]::placeholder,input[type=number]::placeholder,input[type=email]::placeholder,input[type=phone_number]::placeholder{color:var(--nylas-base-300)}input:read-only{background-color:var(--nylas-base-100);cursor:not-allowed}';const n={email:/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,phone_number:/^\+?\d{1,15}$/};const i={email:"name@example.com",phone_number:"1234567890"};const o=class{constructor(s){e(this,s);this.nylasFormInputChanged=a(this,"nylasFormInputChanged",7);this.nylasFormInputFocused=a(this,"nylasFormInputFocused",7);this.nylasFormInputBlurred=a(this,"nylasFormInputBlurred",7);this.name="input";this.label="";this.type="text";this.placeholder=i[this.type];this.required=false;this.readOnly=false;this.autoFocus=false;this.maxLength=255;this.patternError="";this.requiredError="";this.error=""}handleDefaultValueChange(e){this.value=r(e);if(this.value){this.validatePattern(this.value)}}themeConfigChangedHandler(e,a){if(e===a)return;this.applyThemeConfig(e)}applyThemeConfig(e){if(e){for(const[a,s]of Object.entries(e)){this.el.style.setProperty(`${a}`,s)}}}componentDidLoad(){this.value=r(this.defaultValue||"");if(this.type!=="text"&&!this.pattern){this.pattern=n[this.type]}if(this.value){this.validatePattern(this.value)}this.applyThemeConfig(this.themeConfig)}handleBookingFormSubmitted(e){this.validatePattern(this.value);if(this.error){e.preventDefault()}}async handleFormSubmitted(e){if(this.el?.getAttribute("data-page-styling")){this.validatePattern(this.value);if(this.error){e.preventDefault()}}}handleInput(e){this.error="";const a=e.target.value;if(this.type==="number"){const e=parseFloat(a);if(this.maxValue!==undefined&&e>this.maxValue||this.minValue!==undefined&&e<this.minValue){if(this.minValue===undefined){this.error=`Value must be less than ${this.maxValue}`}else if(this.maxValue===undefined){this.error=`Value must be greater than ${this.minValue}`}else{this.error=`Value must be between ${this.minValue} and ${this.maxValue}`}}else if(isNaN(e)){this.error=this.patternError||"Invalid format."}}this.value=r(a);this.nylasFormInputChanged.emit({value:this.value,name:this.name,label:this.label,error:this.error,type:this.type})}handleBlur(){this.nylasFormInputBlurred.emit({value:this.value,name:this.name})}handleFocus(){this.nylasFormInputFocused.emit({value:this.value,name:this.name})}validatePattern(e){this.error="";if(this.required&&!e){this.error=this.requiredError||"This field is required.";return}if(this.type==="number"&&e){const a=parseFloat(e);if(this.maxValue!==undefined&&a>this.maxValue||this.minValue!==undefined&&a<this.minValue){this.error=`Value must be between ${this.minValue} and ${this.maxValue}`;return}}if(this.pattern&&e&&!this.pattern.test(e)){this.error=this.patternError||"Invalid format."}}render(){return s("label",{key:"881a9028c3fa7f64e27fc71661b0688151bca318",part:this.error?"ic__label ic__label--error":"ic__label",class:{error:!!this.error}},this.label&&s("p",{key:"0130b1de1497f61e4e1e14a3774a5b3e0c66a1a1"},s("span",{key:"d4be6ee578e191547d44933749ba74f146d60e30",class:"label"},this.label),this.required&&s("span",{key:"7b81a28c750752e5f654d75749929f1896e50f49",class:"required"},"*")),s("div",{key:"44ce9de14ef95651aba27a7a157ae5f81934e1ec",part:"ic__input_wrapper",class:"input_wrapper"},s("input",{key:"e835b426ede7de8972904c5fb70c1dc3c9ecc5de",type:this.type,name:this.name,part:this.error?"ic__input ic__input--error":"ic__input",title:this.readOnly?"read-only field":undefined,readOnly:this.readOnly,autoFocus:this.autoFocus,value:this.value,maxLength:this.maxLength,max:this.type==="number"?this.maxValue:undefined,min:this.type==="number"?this.minValue:undefined,placeholder:this.placeholder,class:{error:!!this.error},onInput:e=>this.handleInput(e),onFocus:()=>this.handleFocus(),onBlur:()=>this.handleBlur()}),s("slot",{key:"32eab1edcf5c56ab8e1b5aa42baee2654279e66d",name:"additional-input"})),this.error&&s("span",{key:"5fba3fbbcd31b7908a2304726f0e5dcf8f9d6455",class:"error help-text",part:"ic__error_message"},this.error))}get el(){return l(this)}static get watchers(){return{defaultValue:["handleDefaultValueChange"],themeConfig:["themeConfigChangedHandler"]}}};o.style=t;export{o as input_component};
+import{r as e,a,h as s,e as l}from"./index-Cbn5rIwb.js";import{n as r}from"./utils-DhmCcrVs.js";const t=':host{display:block;height:auto;--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%}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)}.input_wrapper{display:flex;align-items:center;gap:1rem}input[type=text],input[type=number],input[type=email],input[type=phone_number]{display:flex;height:48px;padding-left:16px;align-items:center;gap:8px;align-self:stretch;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-300);background:var(--nylas-base-0);width:-webkit-fill-available;color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:400;line-height:150%;width:-moz-available;width:-webkit-fill-available}input[type=text]:focus,input[type=number]:focus,input[type=email]:focus,input[type=phone_number]:focus{outline-color:var(--nylas-primary)}input[type=text].error,input[type=number].error,input[type=email].error,input[type=phone_number].error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}input[type=text].error::placeholder,input[type=number].error::placeholder,input[type=email].error::placeholder,input[type=phone_number].error::placeholder{font-weight:400}input[type=text]::placeholder,input[type=number]::placeholder,input[type=email]::placeholder,input[type=phone_number]::placeholder{color:var(--nylas-base-300)}input:read-only{background-color:var(--nylas-base-100);cursor:not-allowed}';const n={email:/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,phone_number:/^\+?\d{1,15}$/};const i={email:"name@example.com",phone_number:"1234567890"};const o=class{constructor(s){e(this,s);this.nylasFormInputChanged=a(this,"nylasFormInputChanged",7);this.nylasFormInputFocused=a(this,"nylasFormInputFocused",7);this.nylasFormInputBlurred=a(this,"nylasFormInputBlurred",7);this.name="input";this.label="";this.type="text";this.placeholder=i[this.type];this.required=false;this.readOnly=false;this.autoFocus=false;this.maxLength=255;this.patternError="";this.requiredError="";this.error=""}handleDefaultValueChange(e){this.value=r(e);if(this.value){this.validatePattern(this.value)}}themeConfigChangedHandler(e,a){if(e===a)return;this.applyThemeConfig(e)}applyThemeConfig(e){if(e){for(const[a,s]of Object.entries(e)){this.el.style.setProperty(`${a}`,s)}}}componentWillLoad(){this.applyThemeConfig(this.themeConfig)}componentDidLoad(){this.value=r(this.defaultValue||"");if(this.type!=="text"&&!this.pattern){this.pattern=n[this.type]}if(this.value){this.validatePattern(this.value)}this.applyThemeConfig(this.themeConfig)}handleBookingFormSubmitted(e){this.validatePattern(this.value);if(this.error){e.preventDefault()}}async handleFormSubmitted(e){if(this.el?.getAttribute("data-page-styling")){this.validatePattern(this.value);if(this.error){e.preventDefault()}}}handleInput(e){this.error="";const a=e.target.value;if(this.type==="number"){const e=parseFloat(a);if(this.maxValue!==undefined&&e>this.maxValue||this.minValue!==undefined&&e<this.minValue){if(this.minValue===undefined){this.error=`Value must be less than ${this.maxValue}`}else if(this.maxValue===undefined){this.error=`Value must be greater than ${this.minValue}`}else{this.error=`Value must be between ${this.minValue} and ${this.maxValue}`}}else if(isNaN(e)){this.error=this.patternError||"Invalid format."}}this.value=r(a);this.nylasFormInputChanged.emit({value:this.value,name:this.name,label:this.label,error:this.error,type:this.type})}handleBlur(){this.nylasFormInputBlurred.emit({value:this.value,name:this.name})}handleFocus(){this.nylasFormInputFocused.emit({value:this.value,name:this.name})}validatePattern(e){this.error="";if(this.required&&!e){this.error=this.requiredError||"This field is required.";return}if(this.type==="number"&&e){const a=parseFloat(e);if(this.maxValue!==undefined&&a>this.maxValue||this.minValue!==undefined&&a<this.minValue){this.error=`Value must be between ${this.minValue} and ${this.maxValue}`;return}}if(this.pattern&&e&&!this.pattern.test(e)){this.error=this.patternError||"Invalid format."}}render(){return s("label",{key:"7612c93c8722edbe354bb7e42e58cdeb1513884d",part:this.error?"ic__label ic__label--error":"ic__label",class:{error:!!this.error}},this.label&&s("p",{key:"72d53b9424bdcd94c45b933d622fa60b76748174"},s("span",{key:"09caecb72a7f77300d98e1605455b20d67091dfc",class:"label"},this.label),this.required&&s("span",{key:"0e4e68eb36344d66119dd1d2068f5a350f0500b8",class:"required"},"*")),s("div",{key:"916210365d854f15b94093bd84abf10a149330c2",part:"ic__input_wrapper",class:"input_wrapper"},s("input",{key:"fb665d3bb79020aabca6264a8e73568536cfbe64",type:this.type,name:this.name,part:this.error?"ic__input ic__input--error":"ic__input",title:this.readOnly?"read-only field":undefined,readOnly:this.readOnly,autoFocus:this.autoFocus,value:this.value,maxLength:this.maxLength,max:this.type==="number"?this.maxValue:undefined,min:this.type==="number"?this.minValue:undefined,placeholder:this.placeholder,class:{error:!!this.error},onInput:e=>this.handleInput(e),onFocus:()=>this.handleFocus(),onBlur:()=>this.handleBlur()}),s("slot",{key:"b306170abc13683640a7ff1255b16f4f530f937b",name:"additional-input"})),this.error&&s("span",{key:"b18f95eeab229474709fbe96494777b8a7e7093a",class:"error help-text",part:"ic__error_message"},this.error))}get el(){return l(this)}static get watchers(){return{defaultValue:["handleDefaultValueChange"],themeConfig:["themeConfigChangedHandler"]}}};o.style=t;export{o as input_component};
 //# sourceMappingURL=input-component.entry.js.map

package/dist/nylas-web-elements/input-component.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["inputComponentCss","DefaultPattern","email","phone_number","DefaultPlaceholder","InputComponent","constructor","hostRef","this","name","label","type","placeholder","required","readOnly","autoFocus","maxLength","patternError","requiredError","error","handleDefaultValueChange","newValue","value","sanitize","validatePattern","themeConfigChangedHandler","newVal","oldVal","applyThemeConfig","themeConfig","key","Object","entries","el","style","setProperty","componentDidLoad","defaultValue","pattern","handleBookingFormSubmitted","event","preventDefault","handleFormSubmitted","getAttribute","handleInput","e","inputValue","target","numericValue","parseFloat","maxValue","undefined","minValue","isNaN","nylasFormInputChanged","emit","handleBlur","nylasFormInputBlurred","handleFocus","nylasFormInputFocused","test","render","h","part","class","title","max","min","onInput","onFocus","onBlur"],"sources":["src/components/design-system/input-component/input-component.scss?tag=input-component&encapsulation=shadow","src/components/design-system/input-component/input-component.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n@use '../../../common/mixins/inputs' as ;\n\n:host {\n display: block;\n height: auto;\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\n p {\n margin: 0;\n }\n\n .error {\n color: var(--nylas-error);\n }\n}\n\n.input_wrapper {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\ninput[type='text'],\ninput[type='number'],\ninput[type='email'],\ninput[type='phone_number'] {\n @include textfield;\n width: -moz-available;\n width: -webkit-fill-available;\n}\n\ninput:read-only {\n background-color: var(--nylas-base-100);\n cursor: not-allowed;\n}","import { Component, h, Prop, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\nimport { sanitize } from '@/utils/utils';\nimport { ThemeConfig } from '@nylas/core';\n\nconst DefaultPattern = {\n email: /^[a-zA-Z0-9.!#$%&'+/=?^_`{\|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)$/,\n phone_number: /^\\+?\\d{1,15}$/,\n};\n\nconst DefaultPlaceholder = {\n email: 'name@example.com',\n phone_number: '1234567890',\n};\n\n/*\n The `input-component` component is a UI component that allows users to input text, email, or phone number values.\n * This component is used in the scheduling form to input text, email and phone number type inputs.\n /\n\n@Component({\n tag: 'input-component',\n styleUrl: 'input-component.scss',\n shadow: true,\n})\nexport class InputComponent {\n /\n The host element\n /\n @Element() el!: HTMLElement;\n /\n The name of the input. This is used to identify the input when submitting a form.\n /\n @Prop() name: string = 'input';\n /\n The default value of the input. This is the value that is displayed when the input is rendered.\n /\n @Prop() defaultValue?: string;\n /\n The label of the input. This is displayed above the input.\n /\n @Prop() label: string = '';\n /\n The type of the input. This is used to determine the input's behavior.\n * Supported types are 'text', 'email', and 'phone_number'.\n /\n @Prop() type: 'text' \| 'email' \| 'phone_number' \| 'number' = 'text';\n /\n The placeholder of the input. This is displayed when the input is empty.\n /\n @Prop() placeholder: string = DefaultPlaceholder[this.type];\n /\n Whether the input is required. If true, the input must have a value when submitting a form.\n * Default is false. If the input is required and the value is empty, an error message is displayed.\n /\n @Prop() required: boolean = false;\n /\n Whether the input is read-only. If true, the input cannot be edited.\n * Default is false.\n /\n @Prop() readOnly: boolean = false;\n /\n Whether the input should be focused when rendered.\n * Default is false. If true, the input is focused when rendered.\n * Use this to set the focus on the first input in a form.\n /\n @Prop() autoFocus: boolean = false;\n /\n The pattern to validate the input value. If the value does not match the pattern, an error message is displayed.\n * Default is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'phone_number'.\n /\n @Prop() pattern?: RegExp;\n /\n The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed.\n * Default is 255.\n /\n @Prop() maxLength: number = 255;\n /\n The error message to display when the value does not match the pattern.\n * Default is 'Invalid <field> format.' where <field> is the input label.\n /\n @Prop() patternError: string = '';\n\n /\n This error message is displayed when the input value is empty and the input is required.\n /\n @Prop() requiredError: string = '';\n @Prop() maxValue?: number; // Optional max value for 'number'\n @Prop() minValue?: number; // Optional min value for 'number'\n\n /\n The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /\n The input value state.\n /\n @State() value!: string;\n /\n The error message state.\n /\n @State() error: string = '';\n\n /\n This event is fired when the input value is changed.\n * The scheduling form listens for this event to validate the input value and submit the form.\n * If using outside of the scheduling form, listen for this event to validate the input value\n * and handle the input value change.\n /\n @Event() nylasFormInputChanged!: EventEmitter<{\n value: string;\n name: string;\n label: string;\n type: string;\n error: string;\n }>;\n\n @Event() nylasFormInputFocused!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n @Event() nylasFormInputBlurred!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n // Lifecycle methods\n @Watch('defaultValue')\n handleDefaultValueChange(newValue: string) {\n this.value = sanitize(newValue);\n if (this.value) {\n this.validatePattern(this.value);\n }\n }\n\n @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 componentDidLoad() {\n this.value = sanitize(this.defaultValue \|\| '');\n if (this.type !== 'text' && !this.pattern) {\n this.pattern = DefaultPattern[this.type];\n }\n\n if (this.value) {\n this.validatePattern(this.value);\n }\n this.applyThemeConfig(this.themeConfig);\n }\n\n // Event listeners\n /\n Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n /\n @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n this.validatePattern(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n @Listen('formSubmitted', { target: 'document' })\n async handleFormSubmitted(event: CustomEvent) {\n if (this.el?.getAttribute('data-page-styling')) {\n this.validatePattern(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n }\n\n // Methods\n handleInput(e: Event) {\n this.error = '';\n const inputValue = (e.target as HTMLInputElement).value;\n\n // For 'number', ensure the value is valid\n if (this.type === 'number') {\n const numericValue = parseFloat(inputValue);\n if ((this.maxValue !== undefined && numericValue > this.maxValue) \|\| (this.minValue !== undefined && numericValue < this.minValue)) {\n if (this.minValue === undefined) {\n this.error = `Value must be less than ${this.maxValue}`;\n } else if (this.maxValue === undefined) {\n this.error = `Value must be greater than ${this.minValue}`;\n } else {\n this.error = `Value must be between ${this.minValue} and ${this.maxValue}`;\n }\n } else if (isNaN(numericValue)) {\n this.error = this.patternError \|\| 'Invalid format.';\n }\n }\n\n this.value = sanitize(inputValue);\n this.nylasFormInputChanged.emit({\n value: this.value,\n name: this.name,\n label: this.label,\n error: this.error,\n type: this.type,\n });\n }\n\n handleBlur() {\n this.nylasFormInputBlurred.emit({\n value: this.value,\n name: this.name,\n });\n }\n\n handleFocus() {\n this.nylasFormInputFocused.emit({\n value: this.value,\n name: this.name,\n });\n }\n\n validatePattern(value: string) {\n // Reset error\n this.error = '';\n\n if (this.required && !value) {\n this.error = this.requiredError \|\| 'This field is required.';\n return;\n }\n\n if (this.type === 'number' && value) {\n const numericValue = parseFloat(value);\n if ((this.maxValue !== undefined && numericValue > this.maxValue) \|\| (this.minValue !== undefined && numericValue < this.minValue)) {\n this.error = `Value must be between ${this.minValue} and ${this.maxValue}`;\n return;\n }\n }\n\n if (this.pattern && value && !this.pattern.test(value)) {\n this.error = this.patternError \|\| 'Invalid format.';\n }\n }\n\n render() {\n return (\n <label part={this.error ? 'ic__label ic__label--error' : 'ic__label'} class={{ error: !!this.error }}>\n {this.label && (\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\"></span>}\n </p>\n )}\n <div part=\"ic__input_wrapper\" class=\"input_wrapper\">\n <input\n type={this.type}\n name={this.name}\n part={this.error ? 'ic__input ic__input--error' : 'ic__input'}\n title={this.readOnly ? 'read-only field' : undefined}\n readOnly={this.readOnly}\n autoFocus={this.autoFocus}\n value={this.value}\n maxLength={this.maxLength}\n max={this.type === 'number' ? this.maxValue : undefined}\n min={this.type === 'number' ? this.minValue : undefined}\n placeholder={this.placeholder}\n class={{ error: !!this.error }}\n onInput={e => this.handleInput(e)}\n onFocus={() => this.handleFocus()}\n onBlur={() => this.handleBlur()}\n />\n <slot name=\"additional-input\"></slot>\n </div>\n {this.error && (\n <span class=\"error help-text\" part=\"ic__error_message\">\n {this.error}\n </span>\n )}\n </label>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["inputComponentCss","DefaultPattern","email","phone_number","DefaultPlaceholder","InputComponent","constructor","hostRef","this","name","label","type","placeholder","required","readOnly","autoFocus","maxLength","patternError","requiredError","error","handleDefaultValueChange","newValue","value","sanitize","validatePattern","themeConfigChangedHandler","newVal","oldVal","applyThemeConfig","themeConfig","key","Object","entries","el","style","setProperty","componentWillLoad","componentDidLoad","defaultValue","pattern","handleBookingFormSubmitted","event","preventDefault","handleFormSubmitted","getAttribute","handleInput","e","inputValue","target","numericValue","parseFloat","maxValue","undefined","minValue","isNaN","nylasFormInputChanged","emit","handleBlur","nylasFormInputBlurred","handleFocus","nylasFormInputFocused","test","render","h","part","class","title","max","min","onInput","onFocus","onBlur"],"sources":["src/components/design-system/input-component/input-component.scss?tag=input-component&encapsulation=shadow","src/components/design-system/input-component/input-component.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n@use '../../../common/mixins/inputs' as ;\n\n:host {\n display: block;\n height: auto;\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\n p {\n margin: 0;\n }\n\n .error {\n color: var(--nylas-error);\n }\n}\n\n.input_wrapper {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\ninput[type='text'],\ninput[type='number'],\ninput[type='email'],\ninput[type='phone_number'] {\n @include textfield;\n width: -moz-available;\n width: -webkit-fill-available;\n}\n\ninput:read-only {\n background-color: var(--nylas-base-100);\n cursor: not-allowed;\n}","import { Component, h, Prop, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\nimport { sanitize } from '@/utils/utils';\nimport { ThemeConfig } from '@nylas/core';\n\nconst DefaultPattern = {\n email: /^[a-zA-Z0-9.!#$%&'+/=?^_`{\|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)$/,\n phone_number: /^\\+?\\d{1,15}$/,\n};\n\nconst DefaultPlaceholder = {\n email: 'name@example.com',\n phone_number: '1234567890',\n};\n\n/*\n The `input-component` component is a UI component that allows users to input text, email, or phone number values.\n * This component is used in the scheduling form to input text, email and phone number type inputs.\n /\n\n@Component({\n tag: 'input-component',\n styleUrl: 'input-component.scss',\n shadow: true,\n})\nexport class InputComponent {\n /\n The host element\n /\n @Element() el!: HTMLElement;\n /\n The name of the input. This is used to identify the input when submitting a form.\n /\n @Prop() name: string = 'input';\n /\n The default value of the input. This is the value that is displayed when the input is rendered.\n /\n @Prop() defaultValue?: string;\n /\n The label of the input. This is displayed above the input.\n /\n @Prop() label: string = '';\n /\n The type of the input. This is used to determine the input's behavior.\n * Supported types are 'text', 'email', and 'phone_number'.\n /\n @Prop() type: 'text' \| 'email' \| 'phone_number' \| 'number' = 'text';\n /\n The placeholder of the input. This is displayed when the input is empty.\n /\n @Prop() placeholder: string = DefaultPlaceholder[this.type];\n /\n Whether the input is required. If true, the input must have a value when submitting a form.\n * Default is false. If the input is required and the value is empty, an error message is displayed.\n /\n @Prop() required: boolean = false;\n /\n Whether the input is read-only. If true, the input cannot be edited.\n * Default is false.\n /\n @Prop() readOnly: boolean = false;\n /\n Whether the input should be focused when rendered.\n * Default is false. If true, the input is focused when rendered.\n * Use this to set the focus on the first input in a form.\n /\n @Prop() autoFocus: boolean = false;\n /\n The pattern to validate the input value. If the value does not match the pattern, an error message is displayed.\n * Default is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'phone_number'.\n /\n @Prop() pattern?: RegExp;\n /\n The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed.\n * Default is 255.\n /\n @Prop() maxLength: number = 255;\n /\n The error message to display when the value does not match the pattern.\n * Default is 'Invalid <field> format.' where <field> is the input label.\n /\n @Prop() patternError: string = '';\n\n /\n This error message is displayed when the input value is empty and the input is required.\n /\n @Prop() requiredError: string = '';\n @Prop() maxValue?: number; // Optional max value for 'number'\n @Prop() minValue?: number; // Optional min value for 'number'\n\n /\n The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /\n The input value state.\n /\n @State() value!: string;\n /\n The error message state.\n /\n @State() error: string = '';\n\n /\n This event is fired when the input value is changed.\n * The scheduling form listens for this event to validate the input value and submit the form.\n * If using outside of the scheduling form, listen for this event to validate the input value\n * and handle the input value change.\n /\n @Event() nylasFormInputChanged!: EventEmitter<{\n value: string;\n name: string;\n label: string;\n type: string;\n error: string;\n }>;\n\n @Event() nylasFormInputFocused!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n @Event() nylasFormInputBlurred!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n // Lifecycle methods\n @Watch('defaultValue')\n handleDefaultValueChange(newValue: string) {\n this.value = sanitize(newValue);\n if (this.value) {\n this.validatePattern(this.value);\n }\n }\n\n @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 componentWillLoad() {\n this.applyThemeConfig(this.themeConfig);\n }\n\n componentDidLoad() {\n this.value = sanitize(this.defaultValue \|\| '');\n if (this.type !== 'text' && !this.pattern) {\n this.pattern = DefaultPattern[this.type];\n }\n\n if (this.value) {\n this.validatePattern(this.value);\n }\n this.applyThemeConfig(this.themeConfig);\n }\n\n // Event listeners\n /\n Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n /\n @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n this.validatePattern(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n @Listen('formSubmitted', { target: 'document' })\n async handleFormSubmitted(event: CustomEvent) {\n if (this.el?.getAttribute('data-page-styling')) {\n this.validatePattern(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n }\n\n // Methods\n handleInput(e: Event) {\n this.error = '';\n const inputValue = (e.target as HTMLInputElement).value;\n\n // For 'number', ensure the value is valid\n if (this.type === 'number') {\n const numericValue = parseFloat(inputValue);\n if ((this.maxValue !== undefined && numericValue > this.maxValue) \|\| (this.minValue !== undefined && numericValue < this.minValue)) {\n if (this.minValue === undefined) {\n this.error = `Value must be less than ${this.maxValue}`;\n } else if (this.maxValue === undefined) {\n this.error = `Value must be greater than ${this.minValue}`;\n } else {\n this.error = `Value must be between ${this.minValue} and ${this.maxValue}`;\n }\n } else if (isNaN(numericValue)) {\n this.error = this.patternError \|\| 'Invalid format.';\n }\n }\n\n this.value = sanitize(inputValue);\n this.nylasFormInputChanged.emit({\n value: this.value,\n name: this.name,\n label: this.label,\n error: this.error,\n type: this.type,\n });\n }\n\n handleBlur() {\n this.nylasFormInputBlurred.emit({\n value: this.value,\n name: this.name,\n });\n }\n\n handleFocus() {\n this.nylasFormInputFocused.emit({\n value: this.value,\n name: this.name,\n });\n }\n\n validatePattern(value: string) {\n // Reset error\n this.error = '';\n\n if (this.required && !value) {\n this.error = this.requiredError \|\| 'This field is required.';\n return;\n }\n\n if (this.type === 'number' && value) {\n const numericValue = parseFloat(value);\n if ((this.maxValue !== undefined && numericValue > this.maxValue) \|\| (this.minValue !== undefined && numericValue < this.minValue)) {\n this.error = `Value must be between ${this.minValue} and ${this.maxValue}`;\n return;\n }\n }\n\n if (this.pattern && value && !this.pattern.test(value)) {\n this.error = this.patternError \|\| 'Invalid format.';\n }\n }\n\n render() {\n return (\n <label part={this.error ? 'ic__label ic__label--error' : 'ic__label'} class={{ error: !!this.error }}>\n {this.label && (\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\"></span>}\n </p>\n )}\n <div part=\"ic__input_wrapper\" class=\"input_wrapper\">\n <input\n type={this.type}\n name={this.name}\n part={this.error ? 'ic__input ic__input--error' : 'ic__input'}\n title={this.readOnly ? 'read-only field' : undefined}\n readOnly={this.readOnly}\n autoFocus={this.autoFocus}\n value={this.value}\n maxLength={this.maxLength}\n max={this.type === 'number' ? this.maxValue : undefined}\n min={this.type === 'number' ? this.minValue : undefined}\n placeholder={this.placeholder}\n class={{ error: !!this.error }}\n onInput={e => this.handleInput(e)}\n onFocus={() => this.handleFocus()}\n onBlur={() => this.handleBlur()}\n />\n <slot name=\"additional-input\"></slot>\n </div>\n {this.error && (\n <span class=\"error help-text\" part=\"ic__error_message\">\n {this.error}\n </span>\n )}\n </label>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/nylas-web-elements/input-dropdown.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-dropdown.entry.esm.js","sources":["src/components/design-system/input-dropdown/input-dropdown.scss?tag=input-dropdown&encapsulation=shadow","src/components/design-system/input-dropdown/input-dropdown.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n\n:host {\n display: block;\n position: relative;\n @include default-css-variables;\n \n @media #{$mobile} {\n position: unset;\n }\n}\n\n.dropdown {\n display: inline-block;\n width: inherit;\n}\n\n.dropbtn {\n color: var(--nylas-base-800);\n padding: 10px;\n font-size: 16px;\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 padding: 14px 16px;\n border-radius: var(--nylas-border-radius-2x);\n\n &.focus {\n background: transparent;\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 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\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 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 @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}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { DropdownOption, ThemeConfig } from '@nylas/core';\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 /\n This is used to set if the dropdown should be filtered based on the input value.\n * If set to true, the dropdown will be filtered based on the input value.\n /\n @Prop() filterable: boolean = false;\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 = this.defaultInputOption \|\| null;\n /\n The open state of the dropdown\n /\n @State() isOpen: boolean = false;\n\n /\n The typed value in the input\n /\n @State() typedValue: string = '';\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 = this.getFilteredOptions(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.filteredOptions = this.getFilteredOptions(this.options);\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 componentWillLoad() {\n this.filteredOptions = this.getFilteredOptions(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 componentDidLoad() {\n this.applyThemeConfig(this.themeConfig);\n }\n\n // Methods\n getFilteredOptions(options): DropdownOption[] {\n if (!this.filterable) {\n return options;\n }\n\n return options.filter(\n option => option?.value?.toString().toLowerCase().includes(this.typedValue?.toLowerCase()) \|\| option?.label?.toLowerCase().includes(this.typedValue?.toLowerCase()),\n );\n }\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 this.typedValue = 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 if (!childElement \|\| !parentElement) return;\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"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"input-dropdown.entry.esm.js","sources":["src/components/design-system/input-dropdown/input-dropdown.scss?tag=input-dropdown&encapsulation=shadow","src/components/design-system/input-dropdown/input-dropdown.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n\n:host {\n display: block;\n position: relative;\n @include default-css-variables;\n \n @media #{$mobile} {\n position: unset;\n }\n}\n\n.dropdown {\n display: inline-block;\n width: inherit;\n}\n\n.dropbtn {\n color: var(--nylas-base-800);\n padding: 10px;\n font-size: 16px;\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 padding: 14px 16px;\n border-radius: var(--nylas-border-radius-2x);\n\n &.focus {\n background: transparent;\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 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\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 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 @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}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { DropdownOption, ThemeConfig } from '@nylas/core';\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 /\n This is used to set if the dropdown should be filtered based on the input value.\n * If set to true, the dropdown will be filtered based on the input value.\n /\n @Prop() filterable: boolean = false;\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 = this.defaultInputOption \|\| null;\n /\n The open state of the dropdown\n /\n @State() isOpen: boolean = false;\n\n /\n The typed value in the input\n /\n @State() typedValue: string = '';\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 = this.getFilteredOptions(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.filteredOptions = this.getFilteredOptions(this.options);\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 componentWillLoad() {\n this.filteredOptions = this.getFilteredOptions(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 this.applyThemeConfig(this.themeConfig);\n }\n\n componentDidLoad() {\n this.applyThemeConfig(this.themeConfig);\n }\n\n // Methods\n getFilteredOptions(options): DropdownOption[] {\n if (!this.filterable) {\n return options;\n }\n\n return options.filter(\n option => option?.value?.toString().toLowerCase().includes(this.typedValue?.toLowerCase()) \|\| option?.label?.toLowerCase().includes(this.typedValue?.toLowerCase()),\n );\n }\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 this.typedValue = 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 if (!childElement \|\| !parentElement) return;\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"],"names":[],"mappings":"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"}

package/dist/nylas-web-elements/input-dropdown.entry.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{r as e,a as s,h as o,e as n}from"./index-B-KMpdMZ.js";const t=':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}@media screen and (max-width: 768px){:host{position:unset}}.dropdown{display:inline-block;width:inherit}.dropbtn{color:var(--nylas-base-800);padding:10px;font-size:16px;font-family:var(--nylas-font-family);cursor:pointer;display:flex;gap:0.5rem;background:transparent;border:none;border-radius:var(--nylas-border-radius-2x);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: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}';const a=class{constructor(o){e(this,o);this.inputOptionChanged=s(this,"inputOptionChanged",7);this.options=[];this.pluralizedLabel="";this.filterable=false;this.selectedOption=this.defaultInputOption||null;this.isOpen=false;this.typedValue="";this.filteredOptions=[...this.options];this.ariaActivedescendant="";this.shouldAutoScroll=false}optionsChangedHandler(e,s){if(e===s){return}this.filteredOptions=this.getFilteredOptions(e)}defaultSelectedOptionChangedHandler(e,s){if(e?.label===s?.label){return}this.selectedOption=e}inputValueChangedHandler(e,s){if(e===s){return}this.filteredOptions=this.getFilteredOptions(this.options)}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)}}}componentWillLoad(){this.filteredOptions=this.getFilteredOptions(this.options);if(!this.selectedOption&&!!this.defaultInputOption){this.selectedOption=this.defaultInputOption}if(!this.selectedOption&&this.options.length>0){this.selectedOption=this.options[0]}}componentDidLoad(){this.applyThemeConfig(this.themeConfig)}getFilteredOptions(e){if(!this.filterable){return e}return e.filter((e=>e?.value?.toString().toLowerCase().includes(this.typedValue?.toLowerCase())||e?.label?.toLowerCase().includes(this.typedValue?.toLowerCase())))}toggleDropdown(){this.isOpen=!this.isOpen}selectOption(e){this.selectedOption=e;this.toggleDropdown();this.inputOptionChanged.emit({value:e.value,name:this.name})}handleOnInput(e){const s=e.target.value;this.typedValue=s;const o=this.options.findIndex((e=>e.label.toLowerCase().includes(s.toLowerCase())));if(o>-1){this.scrollToViewWithinParent(o)}this.inputOptionChanged.emit({value:s,name:this.name})}scrollToViewWithinParent(e){const s=this.options[e];const o=this.el.shadowRoot?.getElementById(s.value.toString());const n=this.optionsRef;this.ariaActivedescendant=s.value.toString();if(!o||!n)return;const t=o.getBoundingClientRect();const a=n.getBoundingClientRect();if(t.top<a.top){n.scrollTop-=a.top-t.top}else if(t.bottom>a.bottom){n.scrollTop+=t.bottom-a.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 s=e.target.value;const o=this.options.findIndex((e=>e.label.toLowerCase().includes(s.toLowerCase())));if(o>-1){setTimeout((()=>{this.scrollToViewWithinParent(o)}),10)}}}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 n=o+1<s.length?o+1:0;this.ariaActivedescendant=s[n].value;this.focusOption(n)}else if(e.key==="ArrowUp"||e.key==="Tab"&&e.shiftKey){e.preventDefault();if(o===0){this.ariaActivedescendant="";this.inputRef?.focus();return}const n=o-1>=0?o-1:s.length-1;this.ariaActivedescendant=s[n].value;this.focusOption(n)}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 n=this.el.shadowRoot?.getElementById(o);if(n){n.focus();n.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 s=e.composedPath();const o=s.includes(this.el);if(!o&&this.isOpen){this.isOpen=false}}render(){return o("div",{key:"b1a220d807349715d71a3946cf7d71a5837d615c",class:"dropdown",part:"id_dropdown"},o("input",{key:"b58e0f711dced5ba1e50a186738adb312560ebb3",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?o("div",{class:"dropdown-content",part:"id_dropdown-content",ref:e=>this.optionsRef=e},o("ul",{tabindex:"-1",role:"listbox","aria-label":this.name,"aria-activedescendant":this.ariaActivedescendant,onKeyDown:e=>this.handleListboxKeydown(e)},this.filteredOptions.map((e=>o("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 n(this)}static get watchers(){return{options:["optionsChangedHandler"],defaultInputOption:["defaultSelectedOptionChangedHandler"],inputValue:["inputValueChangedHandler"],themeConfig:["themeConfigChangedHandler"]}}};a.style=t;export{a as input_dropdown};
+import{r as e,a as s,h as o,e as n}from"./index-Cbn5rIwb.js";const t=':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}@media screen and (max-width: 768px){:host{position:unset}}.dropdown{display:inline-block;width:inherit}.dropbtn{color:var(--nylas-base-800);padding:10px;font-size:16px;font-family:var(--nylas-font-family);cursor:pointer;display:flex;gap:0.5rem;background:transparent;border:none;border-radius:var(--nylas-border-radius-2x);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: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}';const a=class{constructor(o){e(this,o);this.inputOptionChanged=s(this,"inputOptionChanged",7);this.options=[];this.pluralizedLabel="";this.filterable=false;this.selectedOption=this.defaultInputOption||null;this.isOpen=false;this.typedValue="";this.filteredOptions=[...this.options];this.ariaActivedescendant="";this.shouldAutoScroll=false}optionsChangedHandler(e,s){if(e===s){return}this.filteredOptions=this.getFilteredOptions(e)}defaultSelectedOptionChangedHandler(e,s){if(e?.label===s?.label){return}this.selectedOption=e}inputValueChangedHandler(e,s){if(e===s){return}this.filteredOptions=this.getFilteredOptions(this.options)}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)}}}componentWillLoad(){this.filteredOptions=this.getFilteredOptions(this.options);if(!this.selectedOption&&!!this.defaultInputOption){this.selectedOption=this.defaultInputOption}if(!this.selectedOption&&this.options.length>0){this.selectedOption=this.options[0]}this.applyThemeConfig(this.themeConfig)}componentDidLoad(){this.applyThemeConfig(this.themeConfig)}getFilteredOptions(e){if(!this.filterable){return e}return e.filter((e=>e?.value?.toString().toLowerCase().includes(this.typedValue?.toLowerCase())||e?.label?.toLowerCase().includes(this.typedValue?.toLowerCase())))}toggleDropdown(){this.isOpen=!this.isOpen}selectOption(e){this.selectedOption=e;this.toggleDropdown();this.inputOptionChanged.emit({value:e.value,name:this.name})}handleOnInput(e){const s=e.target.value;this.typedValue=s;const o=this.options.findIndex((e=>e.label.toLowerCase().includes(s.toLowerCase())));if(o>-1){this.scrollToViewWithinParent(o)}this.inputOptionChanged.emit({value:s,name:this.name})}scrollToViewWithinParent(e){const s=this.options[e];const o=this.el.shadowRoot?.getElementById(s.value.toString());const n=this.optionsRef;this.ariaActivedescendant=s.value.toString();if(!o||!n)return;const t=o.getBoundingClientRect();const a=n.getBoundingClientRect();if(t.top<a.top){n.scrollTop-=a.top-t.top}else if(t.bottom>a.bottom){n.scrollTop+=t.bottom-a.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 s=e.target.value;const o=this.options.findIndex((e=>e.label.toLowerCase().includes(s.toLowerCase())));if(o>-1){setTimeout((()=>{this.scrollToViewWithinParent(o)}),10)}}}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 n=o+1<s.length?o+1:0;this.ariaActivedescendant=s[n].value;this.focusOption(n)}else if(e.key==="ArrowUp"||e.key==="Tab"&&e.shiftKey){e.preventDefault();if(o===0){this.ariaActivedescendant="";this.inputRef?.focus();return}const n=o-1>=0?o-1:s.length-1;this.ariaActivedescendant=s[n].value;this.focusOption(n)}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 n=this.el.shadowRoot?.getElementById(o);if(n){n.focus();n.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 s=e.composedPath();const o=s.includes(this.el);if(!o&&this.isOpen){this.isOpen=false}}render(){return o("div",{key:"d60fdb536894678c4d053cb8c758f8fabbc6f5ef",class:"dropdown",part:"id_dropdown"},o("input",{key:"5229abe831d775dbd97e36ed0f0dcf24935041d6",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?o("div",{class:"dropdown-content",part:"id_dropdown-content",ref:e=>this.optionsRef=e},o("ul",{tabindex:"-1",role:"listbox","aria-label":this.name,"aria-activedescendant":this.ariaActivedescendant,onKeyDown:e=>this.handleListboxKeydown(e)},this.filteredOptions.map((e=>o("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 n(this)}static get watchers(){return{options:["optionsChangedHandler"],defaultInputOption:["defaultSelectedOptionChangedHandler"],inputValue:["inputValueChangedHandler"],themeConfig:["themeConfigChangedHandler"]}}};a.style=t;export{a as input_dropdown};
 //# sourceMappingURL=input-dropdown.entry.js.map

package/dist/nylas-web-elements/input-dropdown.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["inputDropdownCss","InputDropdown","constructor","hostRef","this","options","pluralizedLabel","filterable","selectedOption","defaultInputOption","isOpen","typedValue","filteredOptions","ariaActivedescendant","shouldAutoScroll","optionsChangedHandler","newValue","oldValue","getFilteredOptions","defaultSelectedOptionChangedHandler","label","inputValueChangedHandler","themeConfigChangedHandler","newVal","oldVal","applyThemeConfig","themeConfig","key","value","Object","entries","el","style","setProperty","componentWillLoad","length","componentDidLoad","filter","option","toString","toLowerCase","includes","toggleDropdown","selectOption","inputOptionChanged","emit","name","handleOnInput","event","target","optionIndex","findIndex","scrollToViewWithinParent","childElement","shadowRoot","getElementById","parentElement","optionsRef","childRect","getBoundingClientRect","parentRect","top","scrollTop","bottom","handleSelectButtonKeyDown","preventDefault","inputRef","focus","handleClick","setTimeout","handleListboxKeydown","e","items","currentIndex","item","shiftKey","nextIndex","focusOption","prevIndex","index","elementId","element","scrollIntoView","behavior","block","handleComboboxKeyDown","handleOutsideClick","path","composedPath","isClickInside","render","h","class","part","type","id","dropbtn","open","inputValue","onClick","onKeyDown","onInput","ref","tabindex","role","map","focused","labelHTML"],"sources":["src/components/design-system/input-dropdown/input-dropdown.scss?tag=input-dropdown&encapsulation=shadow","src/components/design-system/input-dropdown/input-dropdown.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n\n:host {\n display: block;\n position: relative;\n @include default-css-variables;\n \n @media #{$mobile} {\n position: unset;\n }\n}\n\n.dropdown {\n display: inline-block;\n width: inherit;\n}\n\n.dropbtn {\n color: var(--nylas-base-800);\n padding: 10px;\n font-size: 16px;\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 padding: 14px 16px;\n border-radius: var(--nylas-border-radius-2x);\n\n &.focus {\n background: transparent;\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 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\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 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 @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}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { DropdownOption, ThemeConfig } from '@nylas/core';\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 /\n This is used to set if the dropdown should be filtered based on the input value.\n * If set to true, the dropdown will be filtered based on the input value.\n /\n @Prop() filterable: boolean = false;\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 = this.defaultInputOption \|\| null;\n /\n The open state of the dropdown\n /\n @State() isOpen: boolean = false;\n\n /\n The typed value in the input\n /\n @State() typedValue: string = '';\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 = this.getFilteredOptions(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.filteredOptions = this.getFilteredOptions(this.options);\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 componentWillLoad() {\n this.filteredOptions = this.getFilteredOptions(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 componentDidLoad() {\n this.applyThemeConfig(this.themeConfig);\n }\n\n // Methods\n getFilteredOptions(options): DropdownOption[] {\n if (!this.filterable) {\n return options;\n }\n\n return options.filter(\n option => option?.value?.toString().toLowerCase().includes(this.typedValue?.toLowerCase()) \|\| option?.label?.toLowerCase().includes(this.typedValue?.toLowerCase()),\n );\n }\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 this.typedValue = 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 if (!childElement \|\| !parentElement) return;\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"],"mappings":"6DAAA,MAAMA,EAAmB,u4I,MCcZC,EAAa,MAL1B,WAAAC,CAAAC,G,iEAmBUC,KAAOC,QAAqB,GAY5BD,KAAeE,gBAAW,GAM1BF,KAAUG,WAAY,MAUrBH,KAAAI,eAAwCJ,KAAKK,oBAAsB,KAInEL,KAAMM,OAAY,MAKlBN,KAAUO,WAAW,GAKrBP,KAAAQ,gBAAoC,IAAIR,KAAKC,SAM7CD,KAAoBS,qBAAW,GAK/BT,KAAgBU,iBAAY,KAgRtC,CApQC,qBAAAC,CAAsBC,EAA4BC,GAChD,GAAID,IAAaC,EAAU,CACzB,M,CAEFb,KAAKQ,gBAAkBR,KAAKc,mBAAmBF,E,CAIjD,mCAAAG,CAAoCH,EAA0BC,GAC5D,GAAID,GAAUI,QAAUH,GAAUG,MAAO,CACvC,M,CAEFhB,KAAKI,eAAiBQ,C,CAIxB,wBAAAK,CAAyBL,EAAkBC,GACzC,GAAID,IAAaC,EAAU,CACzB,M,CAEFb,KAAKQ,gBAAkBR,KAAKc,mBAAmBd,KAAKC,Q,CAItD,yBAAAiB,CAA0BC,EAAqBC,GAC7C,GAAID,IAAWC,EAAQ,OACvBpB,KAAKqB,iBAAiBF,E,CAGxB,gBAAAE,CAAiBC,GACf,GAAIA,EAAa,CACf,IAAK,MAAOC,EAAKC,KAAUC,OAAOC,QAAQJ,GAAc,CACtDtB,KAAK2B,GAAGC,MAAMC,YAAY,GAAGN,IAAOC,E,GAM1C,iBAAAM,GACE9B,KAAKQ,gBAAkBR,KAAKc,mBAAmBd,KAAKC,SAEpD,IAAKD,KAAKI,kBAAoBJ,KAAKK,mBAAoB,CACrDL,KAAKI,eAAiBJ,KAAKK,kB,CAE7B,IAAKL,KAAKI,gBAAkBJ,KAAKC,QAAQ8B,OAAS,EAAG,CACnD/B,KAAKI,eAAiBJ,KAAKC,QAAQ,E,EAIvC,gBAAA+B,GACEhC,KAAKqB,iBAAiBrB,KAAKsB,Y,CAI7B,kBAAAR,CAAmBb,GACjB,IAAKD,KAAKG,WAAY,CACpB,OAAOF,C,CAGT,OAAOA,EAAQgC,QACbC,GAAUA,GAAQV,OAAOW,WAAWC,cAAcC,SAASrC,KAAKO,YAAY6B,gBAAkBF,GAAQlB,OAAOoB,cAAcC,SAASrC,KAAKO,YAAY6B,gB,CAGzJ,cAAAE,GACEtC,KAAKM,QAAUN,KAAKM,M,CAGtB,YAAAiC,CAAaL,GACXlC,KAAKI,eAAiB8B,EACtBlC,KAAKsC,iBACLtC,KAAKwC,mBAAmBC,KAAK,CAC3BjB,MAAOU,EAAOV,MACdkB,KAAM1C,KAAK0C,M,CAIf,aAAAC,CAAcC,GACZ,MAAMpB,EAASoB,EAAMC,OAA4BrB,MACjDxB,KAAKO,WAAaiB,EAClB,MAAMsB,EAAc9C,KAAKC,QAAQ8C,WAAUb,GAAUA,EAAOlB,MAAMoB,cAAcC,SAASb,EAAMY,iBAC/F,GAAIU,GAAe,EAAG,CACpB9C,KAAKgD,yBAAyBF,E,CAEhC9C,KAAKwC,mBAAmBC,KAAK,CAC3BjB,QACAkB,KAAM1C,KAAK0C,M,CAIf,wBAAAM,CAAyBF,GACvB,MAAMZ,EAASlC,KAAKC,QAAQ6C,GAC5B,MAAMG,EAAejD,KAAK2B,GAAGuB,YAAYC,eAAejB,EAAOV,MAAMW,YACrE,MAAMiB,EAAgBpD,KAAKqD,WAE3BrD,KAAKS,qBAAuByB,EAAOV,MAAMW,WACzC,IAAKc,IAAiBG,EAAe,OAErC,MAAME,EAAYL,EAAaM,wBAC/B,MAAMC,EAAaJ,EAAcG,wBAEjC,GAAID,EAAUG,IAAMD,EAAWC,IAAK,CAElCL,EAAcM,WAAaF,EAAWC,IAAMH,EAAUG,G,MACjD,GAAIH,EAAUK,OAASH,EAAWG,OAAQ,CAE/CP,EAAcM,WAAaJ,EAAUK,OAASH,EAAWG,M,EAI7D,yBAAAC,CAA0BhB,GACxB,OAAQA,EAAMrB,KACZ,IAAK,YACL,IAAK,QACHqB,EAAMiB,iBACN,IAAK7D,KAAKM,OAAQ,CAChBN,KAAKsC,gB,CAEPtC,KAAK8D,UAAUC,QACf,MACF,IAAK,SACH/D,KAAKM,OAAS,MACd,M,CAIN,WAAA0D,CAAYpB,GACV,GAAI5C,KAAKM,OAAQ,CACf,MAAMkB,EAASoB,EAAMC,OAA4BrB,MACjD,MAAMsB,EAAc9C,KAAKC,QAAQ8C,WAAUb,GAAUA,EAAOlB,MAAMoB,cAAcC,SAASb,EAAMY,iBAC/F,GAAIU,GAAe,EAAG,CACpBmB,YAAW,KACTjE,KAAKgD,yBAAyBF,EAAY,GACzC,G,GAKT,oBAAAoB,CAAqBC,GACnB,MAAMC,EAAQpE,KAAKQ,gBACnB,MAAM6D,EAAeD,EAAMrB,WAAUuB,GAAQA,EAAK9C,QAAUxB,KAAKS,uBACjE,GAAI0D,EAAE5C,MAAQ,aAAgB4C,EAAE5C,MAAQ,QAAU4C,EAAEI,SAAW,CAC7DJ,EAAEN,iBACF,GAAIQ,IAAiBD,EAAMrC,OAAS,EAAG,CACrC/B,KAAKS,qBAAuB,GAC5BT,KAAK8D,UAAUC,QACf,M,CAEF,MAAMS,EAAYH,EAAe,EAAID,EAAMrC,OAASsC,EAAe,EAAI,EACvErE,KAAKS,qBAAuB2D,EAAMI,GAAWhD,MAC7CxB,KAAKyE,YAAYD,E,MACZ,GAAIL,EAAE5C,MAAQ,WAAc4C,EAAE5C,MAAQ,OAAS4C,EAAEI,SAAW,CACjEJ,EAAEN,iBACF,GAAIQ,IAAiB,EAAG,CACtBrE,KAAKS,qBAAuB,GAC5BT,KAAK8D,UAAUC,QACf,M,CAEF,MAAMW,EAAYL,EAAe,GAAK,EAAIA,EAAe,EAAID,EAAMrC,OAAS,EAC5E/B,KAAKS,qBAAuB2D,EAAMM,GAAWlD,MAC7CxB,KAAKyE,YAAYC,E,MACZ,GAAIP,EAAE5C,MAAQ,QAAS,CAC5B4C,EAAEN,iBACF,GAAI7D,KAAKS,qBAAsB,CAC7BT,KAAKuC,aAAa6B,EAAMC,G,OAErB,GAAIF,EAAE5C,MAAQ,SAAU,CAC7BvB,KAAKM,OAAS,K,EAIlB,WAAAmE,CAAYE,GACV,MAAMzC,EAASlC,KAAKQ,gBAAgBmE,GACpC,IAAKzC,EAAQ,OAEb,MAAM0C,EAAY1C,EAAOV,MACzB,MAAMqD,EAAU7E,KAAK2B,GAAGuB,YAAYC,eAAeyB,GAEnD,GAAIC,EAAS,CACXA,EAAQd,QACRc,EAAQC,eAAe,CAAEC,SAAU,SAAUC,MAAO,W,EAIxD,qBAAAC,CAAsBrC,GACpB,GAAIA,EAAMrB,MAAQ,aAAgBqB,EAAMrB,KAAO,QAAUqB,EAAM2B,SAAW,CACxE3B,EAAMiB,iBACN,IAAK7D,KAAKM,OAAQ,CAChBN,KAAKM,OAAS,KACdN,KAAKU,iBAAmB,KACxB,M,CAEFV,KAAKS,qBAAuBT,KAAKQ,gBAAgB,GAAGgB,MACpDxB,KAAKyE,YAAY,E,MACZ,GAAI7B,EAAMrB,MAAQ,WAAcqB,EAAMrB,MAAQ,OAASqB,EAAM2B,SAAW,CAC7E3B,EAAMiB,iBACN7D,KAAKS,qBAAuBT,KAAKQ,gBAAgBR,KAAKQ,gBAAgBuB,OAAS,GAAGP,MAClFxB,KAAKyE,YAAYzE,KAAKQ,gBAAgBuB,OAAS,E,MAC1C,GAAIa,EAAMrB,MAAQ,SAAU,CACjCvB,KAAKM,OAAS,K,EAMlB,kBAAA4E,CAAmBtC,GAEjB,MAAMuC,EAAOvC,EAAMwC,eAGnB,MAAMC,EAAgBF,EAAK9C,SAASrC,KAAK2B,IAEzC,IAAK0D,GAAiBrF,KAAKM,OAAQ,CACjCN,KAAKM,OAAS,K,EAIlB,MAAAgF,GACE,OACEC,EAAA,OAAAhE,IAAA,2CAAKiE,MAAM,WAAWC,KAAK,eACzBF,EACE,SAAAhE,IAAA,2CAAAmE,KAAK,OACLhD,KAAM1C,KAAK0C,KACXiD,GAAI3F,KAAK0C,KACT+C,KAAK,oBACLD,MAAO,CAAEI,QAAS,KAAMC,KAAM7F,KAAKM,QACnCkB,MAAOxB,KAAK8F,WACZC,QAAU5B,IACRnE,KAAKsC,iBACLtC,KAAKU,iBAAmB,KACxBV,KAAKgE,YAAYG,EAAE,EACpB,gBACa,UACF,aAAAnE,KAAK0C,KAAI,gBACN1C,KAAKM,OAAS,OAAS,QACtC0F,UAAW7B,GAAKnE,KAAKiF,sBAAsBd,GAC3C8B,QAASrD,GAAS5C,KAAK2C,cAAcC,KAEtC5C,KAAKM,OACJiF,EAAA,OAAKC,MAAM,mBAAmBC,KAAK,sBAAsBS,IAAKvE,GAAO3B,KAAKqD,WAAa1B,GACrF4D,EAAA,MAAIY,SAAS,KAAKC,KAAK,UAAsB,aAAApG,KAAK0C,KAAI,wBAAyB1C,KAAKS,qBAAsBuF,UAAW7B,GAAKnE,KAAKkE,qBAAqBC,IACjJnE,KAAKQ,gBAAgB6F,KAAInE,GACxBqD,EAAA,MACEY,SAAS,IACT5E,IAAKW,EAAOV,MACZmE,GAAIzD,EAAOV,MACXuE,QAAS,IAAM/F,KAAKuC,aAAaL,GACjCkE,KAAK,SACLZ,MAAO,CACLc,QAAStG,KAAKS,uBAAyByB,EAAOV,MAAMW,aAGrDD,EAAOqE,UAAYrE,EAAOqE,UAAYrE,EAAOlB,WAKpD,K","ignoreList":[]}
1	+ {"version":3,"names":["inputDropdownCss","InputDropdown","constructor","hostRef","this","options","pluralizedLabel","filterable","selectedOption","defaultInputOption","isOpen","typedValue","filteredOptions","ariaActivedescendant","shouldAutoScroll","optionsChangedHandler","newValue","oldValue","getFilteredOptions","defaultSelectedOptionChangedHandler","label","inputValueChangedHandler","themeConfigChangedHandler","newVal","oldVal","applyThemeConfig","themeConfig","key","value","Object","entries","el","style","setProperty","componentWillLoad","length","componentDidLoad","filter","option","toString","toLowerCase","includes","toggleDropdown","selectOption","inputOptionChanged","emit","name","handleOnInput","event","target","optionIndex","findIndex","scrollToViewWithinParent","childElement","shadowRoot","getElementById","parentElement","optionsRef","childRect","getBoundingClientRect","parentRect","top","scrollTop","bottom","handleSelectButtonKeyDown","preventDefault","inputRef","focus","handleClick","setTimeout","handleListboxKeydown","e","items","currentIndex","item","shiftKey","nextIndex","focusOption","prevIndex","index","elementId","element","scrollIntoView","behavior","block","handleComboboxKeyDown","handleOutsideClick","path","composedPath","isClickInside","render","h","class","part","type","id","dropbtn","open","inputValue","onClick","onKeyDown","onInput","ref","tabindex","role","map","focused","labelHTML"],"sources":["src/components/design-system/input-dropdown/input-dropdown.scss?tag=input-dropdown&encapsulation=shadow","src/components/design-system/input-dropdown/input-dropdown.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n\n:host {\n display: block;\n position: relative;\n @include default-css-variables;\n \n @media #{$mobile} {\n position: unset;\n }\n}\n\n.dropdown {\n display: inline-block;\n width: inherit;\n}\n\n.dropbtn {\n color: var(--nylas-base-800);\n padding: 10px;\n font-size: 16px;\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 padding: 14px 16px;\n border-radius: var(--nylas-border-radius-2x);\n\n &.focus {\n background: transparent;\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 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\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 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 @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}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { DropdownOption, ThemeConfig } from '@nylas/core';\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 /\n This is used to set if the dropdown should be filtered based on the input value.\n * If set to true, the dropdown will be filtered based on the input value.\n /\n @Prop() filterable: boolean = false;\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 = this.defaultInputOption \|\| null;\n /\n The open state of the dropdown\n /\n @State() isOpen: boolean = false;\n\n /\n The typed value in the input\n /\n @State() typedValue: string = '';\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 = this.getFilteredOptions(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.filteredOptions = this.getFilteredOptions(this.options);\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 componentWillLoad() {\n this.filteredOptions = this.getFilteredOptions(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 this.applyThemeConfig(this.themeConfig);\n }\n\n componentDidLoad() {\n this.applyThemeConfig(this.themeConfig);\n }\n\n // Methods\n getFilteredOptions(options): DropdownOption[] {\n if (!this.filterable) {\n return options;\n }\n\n return options.filter(\n option => option?.value?.toString().toLowerCase().includes(this.typedValue?.toLowerCase()) \|\| option?.label?.toLowerCase().includes(this.typedValue?.toLowerCase()),\n );\n }\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 this.typedValue = 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 if (!childElement \|\| !parentElement) return;\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"],"mappings":"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","ignoreList":[]}

package/dist/nylas-web-elements/input-image-url.entry.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{r as e,a,h as n,d as l,e as s}from"./index-B-KMpdMZ.js";import{R as o}from"./register-component-BHk70oxk.js";import{b as r,K as t}from"./utils-Bj5Y75fX.js";const i=':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:inherit}.logo-container{display:flex;flex-direction:row;gap:2rem}.logo-container .input-container{flex:1}.logo-container .input-container span.error-message{color:var(--nylas-error)}.logo-container .logo{display:flex;justify-content:center;align-items:center;width:200px;height:100px;border:var(--nylas-base-200) solid 1px;border-radius:var(--nylas-border-radius-2x);overflow:hidden;padding:10px}.logo-container .logo img{max-height:100%;max-width:100%;object-fit:contain;object-position:center}';var c=undefined&&undefined.__decorate||function(e,a,n,l){var s=arguments.length,o=s<3?a:l===null?l=Object.getOwnPropertyDescriptor(a,n):l,r;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")o=Reflect.decorate(e,a,n,l);else for(var t=e.length-1;t>=0;t--)if(r=e[t])o=(s<3?r(o):s>3?r(a,n,o):r(a,n))||o;return s>3&&o&&Object.defineProperty(a,n,o),o};var f=undefined&&undefined.__metadata||function(e,a){if(typeof Reflect==="object"&&typeof Reflect.metadata==="function")return Reflect.metadata(e,a)};const y=class{constructor(n){e(this,n);this.nylasFormInputImageUrlInvalid=a(this,"nylasFormInputImageUrlInvalid",7);this.valueChanged=a(this,"valueChanged",7);if(n.$hostElement$["s-ei"]){this.internals=n.$hostElement$["s-ei"]}else{this.internals=n.$hostElement$.attachInternals();n.$hostElement$["s-ei"]=this.internals}this.componentType="image-url";this.imageUrl="";this.errorMessage="";this.name="input-image-url";this.currentImageUrl=this.imageUrl;this.error=""}connectedCallback(){r("nylas-image-input","connectedCallback")}disconnectedCallback(){r("nylas-image-input","disconnectedCallback")}componentWillLoad(){r("nylas-image-input","componentWillLoad");this.host.setAttribute("name",this.name);this.host.setAttribute("component-type",this.componentType)}componentDidLoad(){r("nylas-image-input","componentDidLoad");this.currentImageUrl=this.imageUrl;this.setImage(this.imageUrl,false);this.applyThemeConfig(this.themeConfig)}componentWillUpdate(){r("nylas-image-input","componentWillUpdate")}componentDidUpdate(){r("nylas-image-input","componentDidUpdate")}componentWillRender(){r("nylas-image-input","componentWillRender")}componentDidRender(){r("nylas-image-input","componentDidRender")}elementNameChangedHandler(e){r("nylas-image-input","elementNameChangedHandler",e);this.host.setAttribute("name",e)}errorMessageChangedHandler(e){r("nylas-image-input","errorMessageChangedHandler",e);if(this.error){this.error=e}}themeConfigChangedHandler(e,a){if(e===a)return;this.applyThemeConfig(e)}applyThemeConfig(e){if(e){for(const[a,n]of Object.entries(e)){this.host.style.setProperty(`${a}`,n)}}}async nylasFormInputChangedHandler(e){const{name:a,value:n}=e.detail;if(a===this.name){this.setImage(n)}}async nylasFormInputBlurHandler(e){const{name:a,value:n}=e.detail;if(a===this.name){this.setImage(n)}}setImage(e,a=true){this.error="";t(e).then((()=>{this.currentImageUrl=e;this.internals.setValidity({});this.internals.setFormValue(this.currentImageUrl,this.name);if(a){this.valueChanged.emit({value:this.currentImageUrl,name:this.name})}})).catch((()=>{this.error=this.errorMessage||"Invalid image URL.";this.nylasFormInputImageUrlInvalid.emit({value:this.error,name:this.name});if(typeof this.internals.setValidity==="function"){this.internals.setValidity({customError:true},this.error)}}))}render(){return n(l,{key:"5274c6941a74d7950763a36b89d85431bf14b520"},n("div",{key:"5088f65dfc630018714005886af64c74d98b4ecc",class:"logo-container"},n("div",{key:"e61173a42b2bc64afdec3e6ead31188c8c47b074",class:"input-container"},n("input-component",{key:"f5dc4b17bd2579553ae6eadf575cef891a44b020",name:this.name,id:this.name,type:"text",required:false,themeConfig:this.themeConfig,exportparts:"ic_input: iiu__logo-input-textfield",defaultValue:this.imageUrl??""}),this.error&&n("span",{key:"20c9c3bb633687deb16c6843e3ec9a63d0a5f892",class:"error-message"},this.error)),this.currentImageUrl&&!this.error&&n("div",{key:"ac306d7b3f7ec60b138e1c33017a72968b3b4f64",class:"logo"},n("img",{key:"95c4ad488a9880fe381a7978cebe6f1548a81e82",src:this.currentImageUrl,alt:"Logo"}))))}static get formAssociated(){return true}get host(){return s(this)}static get watchers(){return{name:["elementNameChangedHandler"],errorMessage:["errorMessageChangedHandler"],themeConfig:["themeConfigChangedHandler"]}}};c([o({name:"nylas-image-input",eventToProps:{valueChanged:async(e,a)=>{const{valueChanged:n}=e.detail;if(n){n(e)}}}}),f("design:type",Function),f("design:paramtypes",[]),f("design:returntype",void 0)],y.prototype,"render",null);y.style=i;export{y as input_image_url};
+import{r as e,a,h as n,d as l,e as s}from"./index-Cbn5rIwb.js";import{R as o}from"./register-component-Blj8K64f.js";import{b as r,K as t}from"./utils-DhmCcrVs.js";const i=':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:inherit}.logo-container{display:flex;flex-direction:row;gap:2rem}.logo-container .input-container{flex:1}.logo-container .input-container span.error-message{color:var(--nylas-error)}.logo-container .logo{display:flex;justify-content:center;align-items:center;width:200px;height:100px;border:var(--nylas-base-200) solid 1px;border-radius:var(--nylas-border-radius-2x);overflow:hidden;padding:10px}.logo-container .logo img{max-height:100%;max-width:100%;object-fit:contain;object-position:center}';var c=undefined&&undefined.__decorate||function(e,a,n,l){var s=arguments.length,o=s<3?a:l===null?l=Object.getOwnPropertyDescriptor(a,n):l,r;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")o=Reflect.decorate(e,a,n,l);else for(var t=e.length-1;t>=0;t--)if(r=e[t])o=(s<3?r(o):s>3?r(a,n,o):r(a,n))||o;return s>3&&o&&Object.defineProperty(a,n,o),o};var f=undefined&&undefined.__metadata||function(e,a){if(typeof Reflect==="object"&&typeof Reflect.metadata==="function")return Reflect.metadata(e,a)};const y=class{constructor(n){e(this,n);this.nylasFormInputImageUrlInvalid=a(this,"nylasFormInputImageUrlInvalid",7);this.valueChanged=a(this,"valueChanged",7);if(n.$hostElement$["s-ei"]){this.internals=n.$hostElement$["s-ei"]}else{this.internals=n.$hostElement$.attachInternals();n.$hostElement$["s-ei"]=this.internals}this.componentType="image-url";this.imageUrl="";this.errorMessage="";this.name="input-image-url";this.currentImageUrl=this.imageUrl;this.error=""}connectedCallback(){r("nylas-image-input","connectedCallback")}disconnectedCallback(){r("nylas-image-input","disconnectedCallback")}componentWillLoad(){r("nylas-image-input","componentWillLoad");this.host.setAttribute("name",this.name);this.host.setAttribute("component-type",this.componentType)}componentDidLoad(){r("nylas-image-input","componentDidLoad");this.currentImageUrl=this.imageUrl;this.setImage(this.imageUrl,false);this.applyThemeConfig(this.themeConfig)}componentWillUpdate(){r("nylas-image-input","componentWillUpdate")}componentDidUpdate(){r("nylas-image-input","componentDidUpdate")}componentWillRender(){r("nylas-image-input","componentWillRender")}componentDidRender(){r("nylas-image-input","componentDidRender")}elementNameChangedHandler(e){r("nylas-image-input","elementNameChangedHandler",e);this.host.setAttribute("name",e)}errorMessageChangedHandler(e){r("nylas-image-input","errorMessageChangedHandler",e);if(this.error){this.error=e}}themeConfigChangedHandler(e,a){if(e===a)return;this.applyThemeConfig(e)}applyThemeConfig(e){if(e){for(const[a,n]of Object.entries(e)){this.host.style.setProperty(`${a}`,n)}}}async nylasFormInputChangedHandler(e){const{name:a,value:n}=e.detail;if(a===this.name){this.setImage(n)}}async nylasFormInputBlurHandler(e){const{name:a,value:n}=e.detail;if(a===this.name){this.setImage(n)}}setImage(e,a=true){this.error="";t(e).then((()=>{this.currentImageUrl=e;this.internals.setValidity({});this.internals.setFormValue(this.currentImageUrl,this.name);if(a){this.valueChanged.emit({value:this.currentImageUrl,name:this.name})}})).catch((()=>{this.error=this.errorMessage||"Invalid image URL.";this.nylasFormInputImageUrlInvalid.emit({value:this.error,name:this.name});if(typeof this.internals.setValidity==="function"){this.internals.setValidity({customError:true},this.error)}}))}render(){return n(l,{key:"5274c6941a74d7950763a36b89d85431bf14b520"},n("div",{key:"5088f65dfc630018714005886af64c74d98b4ecc",class:"logo-container"},n("div",{key:"e61173a42b2bc64afdec3e6ead31188c8c47b074",class:"input-container"},n("input-component",{key:"f5dc4b17bd2579553ae6eadf575cef891a44b020",name:this.name,id:this.name,type:"text",required:false,themeConfig:this.themeConfig,exportparts:"ic_input: iiu__logo-input-textfield",defaultValue:this.imageUrl??""}),this.error&&n("span",{key:"20c9c3bb633687deb16c6843e3ec9a63d0a5f892",class:"error-message"},this.error)),this.currentImageUrl&&!this.error&&n("div",{key:"ac306d7b3f7ec60b138e1c33017a72968b3b4f64",class:"logo"},n("img",{key:"95c4ad488a9880fe381a7978cebe6f1548a81e82",src:this.currentImageUrl,alt:"Logo"}))))}static get formAssociated(){return true}get host(){return s(this)}static get watchers(){return{name:["elementNameChangedHandler"],errorMessage:["errorMessageChangedHandler"],themeConfig:["themeConfigChangedHandler"]}}};c([o({name:"nylas-image-input",eventToProps:{valueChanged:async(e,a)=>{const{valueChanged:n}=e.detail;if(n){n(e)}}}}),f("design:type",Function),f("design:paramtypes",[]),f("design:returntype",void 0)],y.prototype,"render",null);y.style=i;export{y as input_image_url};
 //# sourceMappingURL=input-image-url.entry.js.map

package/dist/nylas-web-elements/italic-icon.entry.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{r as t,h as e}from"./index-B-KMpdMZ.js";const i=".sc-italic-icon-h{display:flex}";const s=class{constructor(e){t(this,e);this.width="15";this.height="15"}render(){return e("svg",{key:"19c9782be253e30a681686b1102be5c075db53ae",width:this.width,height:this.height,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("path",{key:"78417d9c9b6096d283846790c58912a1cbb7efd8",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"m10 20 4-16m2 0h-4m0 16H8"}))}};s.style=i;export{s as italic_icon};
+import{r as t,h as e}from"./index-Cbn5rIwb.js";const i=".sc-italic-icon-h{display:flex}";const s=class{constructor(e){t(this,e);this.width="15";this.height="15"}render(){return e("svg",{key:"19c9782be253e30a681686b1102be5c075db53ae",width:this.width,height:this.height,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("path",{key:"78417d9c9b6096d283846790c58912a1cbb7efd8",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"m10 20 4-16m2 0h-4m0 16H8"}))}};s.style=i;export{s as italic_icon};
 //# sourceMappingURL=italic-icon.entry.js.map