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/loading-icon.entry.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{r as a,h as e}from"./index-B-KMpdMZ.js";const t=".wave{display:flex;align-items:center;justify-content:center}.dot{width:4px;height:4px;background-color:var(--dot-color, white);border-radius:50%;margin:0 2px;animation:wave 1.5s infinite ease-in-out}.dot:nth-child(2){animation-delay:0.2s}.dot:nth-child(3){animation-delay:0.4s}@keyframes wave{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}";const d=class{constructor(e){a(this,e);this.width="15";this.height="15"}render(){return e("div",{key:"21b27dcae2657136c6f668fa70a185733f1270d9",class:"wave"},e("div",{key:"31628b1d9126b691ff238e397d3c9408d8e1f3bc",class:"dot"}),e("div",{key:"2ace17632df56d39bfd46fc72e4fd279b049a97a",class:"dot"}),e("div",{key:"e4cebaa3c6a61db03bf9e6a815fe490b37cc31c1",class:"dot"}))}};d.style=t;export{d as loading_icon};
+import{r as a,h as e}from"./index-Cbn5rIwb.js";const t=".wave{display:flex;align-items:center;justify-content:center}.dot{width:4px;height:4px;background-color:var(--dot-color, white);border-radius:50%;margin:0 2px;animation:wave 1.5s infinite ease-in-out}.dot:nth-child(2){animation-delay:0.2s}.dot:nth-child(3){animation-delay:0.4s}@keyframes wave{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}";const d=class{constructor(e){a(this,e);this.width="15";this.height="15"}render(){return e("div",{key:"21b27dcae2657136c6f668fa70a185733f1270d9",class:"wave"},e("div",{key:"31628b1d9126b691ff238e397d3c9408d8e1f3bc",class:"dot"}),e("div",{key:"2ace17632df56d39bfd46fc72e4fd279b049a97a",class:"dot"}),e("div",{key:"e4cebaa3c6a61db03bf9e6a815fe490b37cc31c1",class:"dot"}))}};d.style=t;export{d as loading_icon};
 //# sourceMappingURL=loading-icon.entry.js.map

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

@@ -1,2 +1,2 @@
-import{r as t,h as s}from"./index-B-KMpdMZ.js";const c=".sc-location-icon-h{display:flex}";const e=class{constructor(s){t(this,s);this.width="16";this.height="18"}render(){return s("svg",{key:"8ceae57ef620c843779aba6702a6fcd0891d39a7",width:this.width,height:this.height,fill:"none",xmlns:"http://www.w3.org/2000/svg"},s("path",{key:"05517a8b186cfbe8b1954f6a64c3c48de87429ed",d:"M10 7.66211C10 9.31896 8.65685 10.6621 7 10.6621C5.34315 10.6621 4 9.31896 4 7.66211C4 6.00526 5.34315 4.66211 7 4.66211C8.65685 4.66211 10 6.00526 10 7.66211ZM9 7.66211C9 6.55754 8.10457 5.66211 7 5.66211C5.89543 5.66211 5 6.55754 5 7.66211C5 8.76668 5.89543 9.66211 7 9.66211C8.10457 9.66211 9 8.76668 9 7.66211ZM11.9497 12.6171C14.6834 9.88221 14.6834 5.44812 11.9497 2.71326C9.21608 -0.0216067 4.78392 -0.0216067 2.05025 2.71326C-0.683418 5.44812 -0.683418 9.88221 2.05025 12.6171L3.57128 14.1159L5.61408 16.101L5.74691 16.2188C6.52168 16.8468 7.65623 16.8076 8.38611 16.1012L10.8223 13.7312L11.9497 12.6171ZM2.75499 3.4183C5.09944 1.07282 8.90055 1.07282 11.245 3.4183C13.5294 5.70364 13.5879 9.3725 11.4207 11.7288L11.245 11.912L9.92371 13.216L7.69315 15.3846L7.60016 15.4642C7.24594 15.732 6.7543 15.732 6.40012 15.4642L6.30713 15.3845L3.3263 12.4791L2.75499 11.912L2.57927 11.7288C0.412077 9.3725 0.47065 5.70364 2.75499 3.4183Z",fill:"currentColor"}))}};e.style=c;export{e as location_icon};
+import{r as t,h as s}from"./index-Cbn5rIwb.js";const C=".sc-location-icon-h{display:flex}";const c=class{constructor(s){t(this,s);this.width="16";this.height="18"}render(){return s("svg",{key:"8ceae57ef620c843779aba6702a6fcd0891d39a7",width:this.width,height:this.height,fill:"none",xmlns:"http://www.w3.org/2000/svg"},s("path",{key:"05517a8b186cfbe8b1954f6a64c3c48de87429ed",d:"M10 7.66211C10 9.31896 8.65685 10.6621 7 10.6621C5.34315 10.6621 4 9.31896 4 7.66211C4 6.00526 5.34315 4.66211 7 4.66211C8.65685 4.66211 10 6.00526 10 7.66211ZM9 7.66211C9 6.55754 8.10457 5.66211 7 5.66211C5.89543 5.66211 5 6.55754 5 7.66211C5 8.76668 5.89543 9.66211 7 9.66211C8.10457 9.66211 9 8.76668 9 7.66211ZM11.9497 12.6171C14.6834 9.88221 14.6834 5.44812 11.9497 2.71326C9.21608 -0.0216067 4.78392 -0.0216067 2.05025 2.71326C-0.683418 5.44812 -0.683418 9.88221 2.05025 12.6171L3.57128 14.1159L5.61408 16.101L5.74691 16.2188C6.52168 16.8468 7.65623 16.8076 8.38611 16.1012L10.8223 13.7312L11.9497 12.6171ZM2.75499 3.4183C5.09944 1.07282 8.90055 1.07282 11.245 3.4183C13.5294 5.70364 13.5879 9.3725 11.4207 11.7288L11.245 11.912L9.92371 13.216L7.69315 15.3846L7.60016 15.4642C7.24594 15.732 6.7543 15.732 6.40012 15.4642L6.30713 15.3845L3.3263 12.4791L2.75499 11.912L2.57927 11.7288C0.412077 9.3725 0.47065 5.70364 2.75499 3.4183Z",fill:"currentColor"}))}};c.style=C;export{c as location_icon};
 //# sourceMappingURL=location-icon.entry.js.map

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

@@ -1,2 +1,2 @@
-import{r as C,h as L}from"./index-B-KMpdMZ.js";const t=".sc-location-off-icon-h{display:flex}";const o=class{constructor(L){C(this,L);this.width="16";this.height="18"}render(){return L("svg",{key:"92f611a2775277c4b6d5db76179f7d98323068f1",width:this.width,height:this.height,fill:"none",xmlns:"http://www.w3.org/2000/svg"},L("path",{key:"50493e8173f0fd4f46a6f06be16c5cd3a3cf9815",d:"M0.146447 0.808556C0.341709 0.613294 0.658291 0.613294 0.853553 0.808556L15.8536 15.8086C16.0488 16.0038 16.0488 16.3204 15.8536 16.5157C15.6583 16.7109 15.3417 16.7109 15.1464 16.5157L12.0938 13.463L11.8223 13.7312L9.38611 16.1012C8.65623 16.8076 7.52168 16.8468 6.74691 16.2188L6.61408 16.101L4.57128 14.1159L3.05025 12.6171C0.607421 10.1732 0.347525 6.37239 2.27056 3.63976L0.146447 1.51566C-0.0488155 1.3204 -0.0488155 1.00382 0.146447 0.808556ZM9.07768 10.4469C8.74346 10.576 8.38024 10.6468 8.0005 10.6468C6.34839 10.6468 5.00909 9.30689 5.00909 7.65406C5.00909 7.27461 5.07967 6.91166 5.20843 6.57763L2.98793 4.35713C1.49206 6.62038 1.68917 9.67377 3.57927 11.7288L3.75499 11.912L4.3263 12.4791L7.30713 15.3845L7.40012 15.4642C7.7543 15.732 8.24594 15.732 8.60016 15.4642L8.69315 15.3846L10.9237 13.216L11.3883 12.7575L9.07768 10.4469ZM9.85409 8.39486L10.5983 9.13904C10.8487 8.70143 10.9919 8.19447 10.9919 7.65406C10.9919 6.00122 9.65261 4.66134 8.0005 4.66134C7.45986 4.66134 6.95271 4.80482 6.51504 5.05581L7.25921 5.79998C7.48839 5.70819 7.73855 5.6577 8.0005 5.6577C9.10258 5.6577 9.99599 6.5515 9.99599 7.65406C9.99599 7.91581 9.94564 8.16581 9.85409 8.39486ZM4.35291 2.89368C6.70671 1.08827 10.0908 1.26314 12.245 3.4183C14.3986 5.57283 14.5739 8.95702 12.771 11.3118L13.4812 12.022C15.6702 9.27273 15.493 5.25762 12.9497 2.71326C10.4058 0.168159 6.39081 -0.00843871 3.64269 2.18347L4.35291 2.89368Z",fill:"currentColor"}))}};o.style=t;export{o as location_off_icon};
+import{r as C,h as L}from"./index-Cbn5rIwb.js";const t=".sc-location-off-icon-h{display:flex}";const o=class{constructor(L){C(this,L);this.width="16";this.height="18"}render(){return L("svg",{key:"92f611a2775277c4b6d5db76179f7d98323068f1",width:this.width,height:this.height,fill:"none",xmlns:"http://www.w3.org/2000/svg"},L("path",{key:"50493e8173f0fd4f46a6f06be16c5cd3a3cf9815",d:"M0.146447 0.808556C0.341709 0.613294 0.658291 0.613294 0.853553 0.808556L15.8536 15.8086C16.0488 16.0038 16.0488 16.3204 15.8536 16.5157C15.6583 16.7109 15.3417 16.7109 15.1464 16.5157L12.0938 13.463L11.8223 13.7312L9.38611 16.1012C8.65623 16.8076 7.52168 16.8468 6.74691 16.2188L6.61408 16.101L4.57128 14.1159L3.05025 12.6171C0.607421 10.1732 0.347525 6.37239 2.27056 3.63976L0.146447 1.51566C-0.0488155 1.3204 -0.0488155 1.00382 0.146447 0.808556ZM9.07768 10.4469C8.74346 10.576 8.38024 10.6468 8.0005 10.6468C6.34839 10.6468 5.00909 9.30689 5.00909 7.65406C5.00909 7.27461 5.07967 6.91166 5.20843 6.57763L2.98793 4.35713C1.49206 6.62038 1.68917 9.67377 3.57927 11.7288L3.75499 11.912L4.3263 12.4791L7.30713 15.3845L7.40012 15.4642C7.7543 15.732 8.24594 15.732 8.60016 15.4642L8.69315 15.3846L10.9237 13.216L11.3883 12.7575L9.07768 10.4469ZM9.85409 8.39486L10.5983 9.13904C10.8487 8.70143 10.9919 8.19447 10.9919 7.65406C10.9919 6.00122 9.65261 4.66134 8.0005 4.66134C7.45986 4.66134 6.95271 4.80482 6.51504 5.05581L7.25921 5.79998C7.48839 5.70819 7.73855 5.6577 8.0005 5.6577C9.10258 5.6577 9.99599 6.5515 9.99599 7.65406C9.99599 7.91581 9.94564 8.16581 9.85409 8.39486ZM4.35291 2.89368C6.70671 1.08827 10.0908 1.26314 12.245 3.4183C14.3986 5.57283 14.5739 8.95702 12.771 11.3118L13.4812 12.022C15.6702 9.27273 15.493 5.25762 12.9497 2.71326C10.4058 0.168159 6.39081 -0.00843871 3.64269 2.18347L4.35291 2.89368Z",fill:"currentColor"}))}};o.style=t;export{o as location_off_icon};
 //# sourceMappingURL=location-off-icon.entry.js.map

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

@@ -1,2 +1,2 @@
-import{r as e,h as a}from"./index-B-KMpdMZ.js";const d=".sc-microsoft-logo-icon-h{display:flex}";const f=class{constructor(a){e(this,a);this.width="22";this.height="22"}render(){return a("svg",{key:"0b4b07d0221e5a95be59a6cedd7dae17d13a96e4",width:this.width,height:this.height,viewBox:"0 0 22 22",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{key:"92d2012f5215c17a59d9f134c390c1f4da1c3690",d:"M0.043457 0.043457H10.4782V10.4782H0.043457V0.043457Z",fill:"#F35325"}),a("path",{key:"d5b99c8ab6a8633d10faf7ef35fcd7f031e9e743",d:"M11.5217 0.043457H21.9565V10.4782H11.5217V0.043457Z",fill:"#81BC06"}),a("path",{key:"792146aabe443c0663010bbc29f76378b3bae49e",d:"M0.043457 11.5217H10.4782V21.9565H0.043457V11.5217Z",fill:"#05A6F0"}),a("path",{key:"c5e9d04e2b23edf39af52364f044a69aa464b0af",d:"M11.5217 11.5217H21.9565V21.9565H11.5217V11.5217Z",fill:"#FFBA08"}))}};f.style=d;export{f as microsoft_logo_icon};
+import{r as e,h as a}from"./index-Cbn5rIwb.js";const f=".sc-microsoft-logo-icon-h{display:flex}";const t=class{constructor(a){e(this,a);this.width="22";this.height="22"}render(){return a("svg",{key:"0b4b07d0221e5a95be59a6cedd7dae17d13a96e4",width:this.width,height:this.height,viewBox:"0 0 22 22",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{key:"92d2012f5215c17a59d9f134c390c1f4da1c3690",d:"M0.043457 0.043457H10.4782V10.4782H0.043457V0.043457Z",fill:"#F35325"}),a("path",{key:"d5b99c8ab6a8633d10faf7ef35fcd7f031e9e743",d:"M11.5217 0.043457H21.9565V10.4782H11.5217V0.043457Z",fill:"#81BC06"}),a("path",{key:"792146aabe443c0663010bbc29f76378b3bae49e",d:"M0.043457 11.5217H10.4782V21.9565H0.043457V11.5217Z",fill:"#05A6F0"}),a("path",{key:"c5e9d04e2b23edf39af52364f044a69aa464b0af",d:"M11.5217 11.5217H21.9565V21.9565H11.5217V11.5217Z",fill:"#FFBA08"}))}};t.style=f;export{t as microsoft_logo_icon};
 //# sourceMappingURL=microsoft-logo-icon.entry.js.map

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

@@ -1,2 +1,2 @@
-import{r as c,h as e}from"./index-B-KMpdMZ.js";const a=".sc-microsoft-teams-icon-h{display:flex}";const f=class{constructor(e){c(this,e);this.width="20";this.height="20"}render(){return e("svg",{key:"3529c755b79e01dcc81a090ec987d7035fb9d389",width:this.width,height:this.height,viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("g",{key:"cdf9b0b811559971b618a95ff566190f8f8b5f3c","clip-path":"url(#clip0_22_6280)"},e("path",{key:"f75c4fa6b352c0fc549abedf301a1c1d52b86bb0",d:"M13.7109 7.60168H18.8769C19.365 7.60168 19.7607 7.99734 19.7607 8.4854V13.191C19.7607 14.9848 18.3065 16.4389 16.5127 16.4389H16.4974C14.7036 16.4391 13.2493 14.9852 13.249 13.1914C13.249 13.1913 13.249 13.1911 13.249 13.191V8.06355C13.249 7.80847 13.4558 7.60168 13.7109 7.60168Z",fill:"#5059C9"}),e("path",{key:"3f4919b5218d4cbddf6cdac2d3947b75fae1194c",d:"M17.2024 6.67152C18.3583 6.67152 19.2954 5.73444 19.2954 4.5785C19.2954 3.42255 18.3583 2.48547 17.2024 2.48547C16.0465 2.48547 15.1094 3.42255 15.1094 4.5785C15.1094 5.73444 16.0465 6.67152 17.2024 6.67152Z",fill:"#5059C9"}),e("path",{key:"ee9a1129e9d405c7a492ab4bbf0a02101195e72c",d:"M10.6912 6.67152C12.3609 6.67152 13.7145 5.31796 13.7145 3.64826C13.7145 1.97856 12.3609 0.625 10.6912 0.625C9.02153 0.625 7.66797 1.97856 7.66797 3.64826C7.66797 5.31796 9.02153 6.67152 10.6912 6.67152Z",fill:"#7B83EB"}),e("path",{key:"db3fc8894970a4fa16f9bb7dc5de27112b264f7e",d:"M14.7223 7.60168H6.19482C5.71257 7.61362 5.33108 8.01384 5.34227 8.49611V13.8631C5.27492 16.7571 7.56457 19.1588 10.4586 19.2296C13.3525 19.1588 15.6422 16.7571 15.5748 13.8631V8.49611C15.586 8.01384 15.2045 7.61362 14.7223 7.60168Z",fill:"#7B83EB"}),e("path",{key:"c19fd4502b2b0c44fde0e6fd4a7c2aee767273fd",opacity:"0.1",d:"M10.9234 7.60168V15.1226C10.9211 15.4675 10.7121 15.7773 10.3932 15.9087C10.2917 15.9516 10.1825 15.9738 10.0723 15.9738H5.75134C5.69088 15.8203 5.63507 15.6668 5.58855 15.5087C5.42574 14.975 5.34267 14.4201 5.34204 13.8622V8.49471C5.33086 8.01321 5.71172 7.61362 6.1932 7.60168H10.9234Z",fill:"black"}),e("path",{key:"5052e0d8da0902023422c72c5eedf01c60271502",opacity:"0.2",d:"M10.4583 7.60168V15.5877C10.4583 15.698 10.4362 15.8071 10.3932 15.9087C10.2619 16.2276 9.95205 16.4366 9.60717 16.4389H5.96995C5.89088 16.2854 5.81646 16.1319 5.75134 15.9738C5.68623 15.8156 5.63507 15.6668 5.58855 15.5087C5.42574 14.975 5.34267 14.4201 5.34204 13.8622V8.49471C5.33086 8.01321 5.71172 7.61362 6.1932 7.60168H10.4583Z",fill:"black"}),e("path",{key:"374bb50bef027b56b2766ff41f6bc6deb4cc19f6",opacity:"0.2",d:"M10.4583 7.60168V14.6575C10.4548 15.1261 10.0758 15.5051 9.60716 15.5087H5.58855C5.42574 14.975 5.34267 14.4201 5.34204 13.8622V8.49471C5.33086 8.01321 5.71172 7.61362 6.1932 7.60168H10.4583Z",fill:"black"}),e("path",{key:"dbec038adb312e3c0e2fc2516c6ceb4bb64f379c",opacity:"0.2",d:"M9.9932 7.60168V14.6575C9.98965 15.1261 9.61065 15.5051 9.14203 15.5087H5.58855C5.42574 14.975 5.34267 14.4201 5.34204 13.8622V8.49471C5.33086 8.01321 5.71172 7.61362 6.1932 7.60168H9.9932Z",fill:"black"}),e("path",{key:"48ebf6358c01526cc618e9dec646a9f40919ad24",opacity:"0.1",d:"M10.9241 5.1971V6.66222C10.845 6.66687 10.7706 6.67152 10.6915 6.67152C10.6124 6.67152 10.538 6.66687 10.4589 6.66222C10.3019 6.6518 10.1462 6.62689 9.99382 6.5878C9.05195 6.36475 8.27382 5.70421 7.90079 4.81106C7.83661 4.66107 7.78678 4.50533 7.75195 4.34595H10.0729C10.5422 4.34772 10.9223 4.72775 10.9241 5.1971Z",fill:"black"}),e("path",{key:"dc6f5349cd821aa5cec553f8631f4a6971746d0d",opacity:"0.2",d:"M10.4585 5.66219V6.66219C10.3015 6.65177 10.1458 6.62686 9.99341 6.58778C9.05155 6.36473 8.27342 5.70418 7.90039 4.81104H9.60736C10.0767 4.81281 10.4567 5.19285 10.4585 5.66219Z",fill:"black"}),e("path",{key:"7ee1668d38bcf192c167a4c2b68c2c91604d8e1d",opacity:"0.2",d:"M10.4585 5.66219V6.66219C10.3015 6.65177 10.1458 6.62686 9.99341 6.58778C9.05155 6.36473 8.27342 5.70418 7.90039 4.81104H9.60736C10.0767 4.81281 10.4567 5.19285 10.4585 5.66219Z",fill:"black"}),e("path",{key:"772d2d8f1c4d87ff45097c8a7f36d7b98b9e7e52",opacity:"0.2",d:"M9.99341 5.6622V6.58778C9.05155 6.36473 8.27342 5.70418 7.90039 4.81104H9.14225C9.6116 4.81282 9.99163 5.19286 9.99341 5.6622Z",fill:"black"}),e("path",{key:"7b8bb63bf3811811fc07eebfa87f513319cc2c82",d:"M0.613296 4.81104H9.14074C9.61159 4.81104 9.99329 5.19274 9.99329 5.66359V14.191C9.99329 14.6619 9.61158 15.0436 9.14074 15.0436H0.613296C0.14244 15.0436 -0.239258 14.6619 -0.239258 14.191V5.66359C-0.239258 5.19274 0.142449 4.81104 0.613296 4.81104Z",fill:"url(#paint0_linear_22_6280)"}),e("path",{key:"d3d9a48f05ff517863178018f395a667854195e3",d:"M7.12025 8.05659H5.4156V12.6985H4.32956V8.05659H2.63281V7.15613H7.12025V8.05659Z",fill:"white"})),e("defs",{key:"d2fdac800875640c0281e423e88d8de21bc6ce66"},e("linearGradient",{key:"0993753ce16fbef766b87d573fdeacdfa8972c4d",id:"paint0_linear_22_6280",x1:"1.53835",y1:"4.14486",x2:"8.2157",y2:"15.7098",gradientUnits:"userSpaceOnUse"},e("stop",{key:"1e734a330ac9c37765cd0ff8bb15fb317d5f2389","stop-color":"#5A62C3"}),e("stop",{key:"380691512d42454f4084e7baea0bc89b533cdec6",offset:"0.5","stop-color":"#4D55BD"}),e("stop",{key:"0d2128ba660bf58515e557fa9adb687b819b6e7e",offset:"1","stop-color":"#3940AB"})),e("clipPath",{key:"764efed58959aad7b88d1a51a750389c399e94a6",id:"clip0_22_6280"},e("rect",{key:"d440cebd2dd3612d060f970a9ebe6db7c3c66f84",width:"20",height:"20",fill:"white"}))))}};f.style=a;export{f as microsoft_teams_icon};
+import{r as c,h as e}from"./index-Cbn5rIwb.js";const a=".sc-microsoft-teams-icon-h{display:flex}";const f=class{constructor(e){c(this,e);this.width="20";this.height="20"}render(){return e("svg",{key:"3529c755b79e01dcc81a090ec987d7035fb9d389",width:this.width,height:this.height,viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("g",{key:"cdf9b0b811559971b618a95ff566190f8f8b5f3c","clip-path":"url(#clip0_22_6280)"},e("path",{key:"f75c4fa6b352c0fc549abedf301a1c1d52b86bb0",d:"M13.7109 7.60168H18.8769C19.365 7.60168 19.7607 7.99734 19.7607 8.4854V13.191C19.7607 14.9848 18.3065 16.4389 16.5127 16.4389H16.4974C14.7036 16.4391 13.2493 14.9852 13.249 13.1914C13.249 13.1913 13.249 13.1911 13.249 13.191V8.06355C13.249 7.80847 13.4558 7.60168 13.7109 7.60168Z",fill:"#5059C9"}),e("path",{key:"3f4919b5218d4cbddf6cdac2d3947b75fae1194c",d:"M17.2024 6.67152C18.3583 6.67152 19.2954 5.73444 19.2954 4.5785C19.2954 3.42255 18.3583 2.48547 17.2024 2.48547C16.0465 2.48547 15.1094 3.42255 15.1094 4.5785C15.1094 5.73444 16.0465 6.67152 17.2024 6.67152Z",fill:"#5059C9"}),e("path",{key:"ee9a1129e9d405c7a492ab4bbf0a02101195e72c",d:"M10.6912 6.67152C12.3609 6.67152 13.7145 5.31796 13.7145 3.64826C13.7145 1.97856 12.3609 0.625 10.6912 0.625C9.02153 0.625 7.66797 1.97856 7.66797 3.64826C7.66797 5.31796 9.02153 6.67152 10.6912 6.67152Z",fill:"#7B83EB"}),e("path",{key:"db3fc8894970a4fa16f9bb7dc5de27112b264f7e",d:"M14.7223 7.60168H6.19482C5.71257 7.61362 5.33108 8.01384 5.34227 8.49611V13.8631C5.27492 16.7571 7.56457 19.1588 10.4586 19.2296C13.3525 19.1588 15.6422 16.7571 15.5748 13.8631V8.49611C15.586 8.01384 15.2045 7.61362 14.7223 7.60168Z",fill:"#7B83EB"}),e("path",{key:"c19fd4502b2b0c44fde0e6fd4a7c2aee767273fd",opacity:"0.1",d:"M10.9234 7.60168V15.1226C10.9211 15.4675 10.7121 15.7773 10.3932 15.9087C10.2917 15.9516 10.1825 15.9738 10.0723 15.9738H5.75134C5.69088 15.8203 5.63507 15.6668 5.58855 15.5087C5.42574 14.975 5.34267 14.4201 5.34204 13.8622V8.49471C5.33086 8.01321 5.71172 7.61362 6.1932 7.60168H10.9234Z",fill:"black"}),e("path",{key:"5052e0d8da0902023422c72c5eedf01c60271502",opacity:"0.2",d:"M10.4583 7.60168V15.5877C10.4583 15.698 10.4362 15.8071 10.3932 15.9087C10.2619 16.2276 9.95205 16.4366 9.60717 16.4389H5.96995C5.89088 16.2854 5.81646 16.1319 5.75134 15.9738C5.68623 15.8156 5.63507 15.6668 5.58855 15.5087C5.42574 14.975 5.34267 14.4201 5.34204 13.8622V8.49471C5.33086 8.01321 5.71172 7.61362 6.1932 7.60168H10.4583Z",fill:"black"}),e("path",{key:"374bb50bef027b56b2766ff41f6bc6deb4cc19f6",opacity:"0.2",d:"M10.4583 7.60168V14.6575C10.4548 15.1261 10.0758 15.5051 9.60716 15.5087H5.58855C5.42574 14.975 5.34267 14.4201 5.34204 13.8622V8.49471C5.33086 8.01321 5.71172 7.61362 6.1932 7.60168H10.4583Z",fill:"black"}),e("path",{key:"dbec038adb312e3c0e2fc2516c6ceb4bb64f379c",opacity:"0.2",d:"M9.9932 7.60168V14.6575C9.98965 15.1261 9.61065 15.5051 9.14203 15.5087H5.58855C5.42574 14.975 5.34267 14.4201 5.34204 13.8622V8.49471C5.33086 8.01321 5.71172 7.61362 6.1932 7.60168H9.9932Z",fill:"black"}),e("path",{key:"48ebf6358c01526cc618e9dec646a9f40919ad24",opacity:"0.1",d:"M10.9241 5.1971V6.66222C10.845 6.66687 10.7706 6.67152 10.6915 6.67152C10.6124 6.67152 10.538 6.66687 10.4589 6.66222C10.3019 6.6518 10.1462 6.62689 9.99382 6.5878C9.05195 6.36475 8.27382 5.70421 7.90079 4.81106C7.83661 4.66107 7.78678 4.50533 7.75195 4.34595H10.0729C10.5422 4.34772 10.9223 4.72775 10.9241 5.1971Z",fill:"black"}),e("path",{key:"dc6f5349cd821aa5cec553f8631f4a6971746d0d",opacity:"0.2",d:"M10.4585 5.66219V6.66219C10.3015 6.65177 10.1458 6.62686 9.99341 6.58778C9.05155 6.36473 8.27342 5.70418 7.90039 4.81104H9.60736C10.0767 4.81281 10.4567 5.19285 10.4585 5.66219Z",fill:"black"}),e("path",{key:"7ee1668d38bcf192c167a4c2b68c2c91604d8e1d",opacity:"0.2",d:"M10.4585 5.66219V6.66219C10.3015 6.65177 10.1458 6.62686 9.99341 6.58778C9.05155 6.36473 8.27342 5.70418 7.90039 4.81104H9.60736C10.0767 4.81281 10.4567 5.19285 10.4585 5.66219Z",fill:"black"}),e("path",{key:"772d2d8f1c4d87ff45097c8a7f36d7b98b9e7e52",opacity:"0.2",d:"M9.99341 5.6622V6.58778C9.05155 6.36473 8.27342 5.70418 7.90039 4.81104H9.14225C9.6116 4.81282 9.99163 5.19286 9.99341 5.6622Z",fill:"black"}),e("path",{key:"7b8bb63bf3811811fc07eebfa87f513319cc2c82",d:"M0.613296 4.81104H9.14074C9.61159 4.81104 9.99329 5.19274 9.99329 5.66359V14.191C9.99329 14.6619 9.61158 15.0436 9.14074 15.0436H0.613296C0.14244 15.0436 -0.239258 14.6619 -0.239258 14.191V5.66359C-0.239258 5.19274 0.142449 4.81104 0.613296 4.81104Z",fill:"url(#paint0_linear_22_6280)"}),e("path",{key:"d3d9a48f05ff517863178018f395a667854195e3",d:"M7.12025 8.05659H5.4156V12.6985H4.32956V8.05659H2.63281V7.15613H7.12025V8.05659Z",fill:"white"})),e("defs",{key:"d2fdac800875640c0281e423e88d8de21bc6ce66"},e("linearGradient",{key:"0993753ce16fbef766b87d573fdeacdfa8972c4d",id:"paint0_linear_22_6280",x1:"1.53835",y1:"4.14486",x2:"8.2157",y2:"15.7098",gradientUnits:"userSpaceOnUse"},e("stop",{key:"1e734a330ac9c37765cd0ff8bb15fb317d5f2389","stop-color":"#5A62C3"}),e("stop",{key:"380691512d42454f4084e7baea0bc89b533cdec6",offset:"0.5","stop-color":"#4D55BD"}),e("stop",{key:"0d2128ba660bf58515e557fa9adb687b819b6e7e",offset:"1","stop-color":"#3940AB"})),e("clipPath",{key:"764efed58959aad7b88d1a51a750389c399e94a6",id:"clip0_22_6280"},e("rect",{key:"d440cebd2dd3612d060f970a9ebe6db7c3c66f84",width:"20",height:"20",fill:"white"}))))}};f.style=a;export{f as microsoft_teams_icon};
 //# sourceMappingURL=microsoft-teams-icon.entry.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"multi-select-dropdown.entry.esm.js","sources":["src/components/design-system/multi-select-dropdown/multi-select-dropdown.scss?tag=multi-select-dropdown&encapsulation=shadow","src/components/design-system/multi-select-dropdown/multi-select-dropdown.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n\n:host {\n display: block;\n width: inherit;\n @include default-css-variables;\n}\n\n.dropdown {\n display: inline-block;\n width: 100%;\n position: relative;\n\n .dropdown-label {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n color: var(--nylas-base-800);\n\n p {\n margin: 0;\n }\n\n span.required {\n color: var(--nylas-error);\n padding: 0 0.25rem;\n }\n }\n\n span.error {\n color: var(--nylas-error);\n font-size: 14px;\n }\n}\n\n.dropbtn {\n width: inherit;\n height: 48px;\n color: var(--nylas-base-900);\n padding: 0.5rem;\n font-size: 16px;\n cursor: pointer;\n display: flex;\n gap: 0.5rem;\n justify-content: space-between;\n align-items: center;\n background: var(--nylas-base-0);\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n\n &.focus {\n background: var(--nylas-base-0);\n }\n\n &.error {\n border: 1px solid var(--nylas-error);\n }\n\n &:hover,\n &:active {\n border: 1px solid var(--nylas-primary);\n }\n\n &:active {\n outline: 2px solid var(--nylas-primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n background: var(--nylas-base-100);\n }\n\n span {\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n }\n}\n\n.dropdown-content {\n display: block;\n margin-top: 0.5rem;\n background-color: var(--nylas-base-0);\n width: 100%;\n max-height: 336px;\n overflow: auto;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n top: calc(48px + 24px);\n box-shadow: 0px 4px 6px -2px #0000000d;\n box-shadow: 0px 10px 15px -3px #0000001a;\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 label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n input {\n margin: 0;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n\n label {\n cursor: not-allowed;\n\n input {\n cursor: not-allowed;\n }\n }\n }\n }\n}\n\n.selected-options {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n padding: 0.5rem 0;\n margin-top: 0.25rem;\n\n .selected-option {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 4px 8px;\n border-radius: var(--nylas-border-radius-2x);\n background: var(--nylas-base-100);\n color: var(--nylas-base-800);\n font-size: 16px;\n font-weight: 500;\n line-height: 1.5rem;\n letter-spacing: 0.5px;\n\n button {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0;\n\n &:hover {\n color: var(--nylas-primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n background: var(--nylas-base-100);\n }\n }\n }\n}\n","import { debug } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { DropdownOption, ThemeConfig } from '@nylas/core';\n\n@Component({\n tag: 'multi-select-dropdown',\n styleUrl: 'multi-select-dropdown.scss',\n shadow: true,\n})\nexport class MultiSelectDropdown {\n @Element() el!: HTMLElement;\n\n // Props\n /\n The name of the dropdown\n /\n @Prop() name!: string;\n\n /\n The label of the dropdown\n /\n @Prop() label?: string;\n\n /\n The options to display in the dropdown\n /\n @Prop() options: DropdownOption[] = [];\n\n /\n Error message to display\n /\n @Prop({ mutable: true }) error?: string = '';\n\n /\n The option to require selection of at leat one option.\n /\n @Prop() required?: boolean = false;\n\n /\n The property to make the multi-select dropdown read-only. If true, the dropdown cannot be edited.\n /\n @Prop() readOnly?: boolean = false;\n\n /\n Multiple options selected label\n /\n @Prop() multipleOptionsSelectedLabel?: string = 'Multiple options selected';\n\n /\n Select at least one option label\n /\n @Prop() selectAtLeastOneOptionLabel?: string = 'Please select at least one option';\n\n /\n The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /\n The error message to display\n /\n @Prop() errorMessage?: string = 'Please select at least one option.';\n\n // States\n /\n The copy of the options to display in the dropdown\n /\n @State() availableOptions: DropdownOption[] = this.options;\n /\n The open state of the dropdown\n /\n @State() isOpen: boolean = false;\n /\n The aria-activedescendant attribute for the listbox element to indicate the currently active\n /\n @State() ariaActivedescendant: string = '';\n\n /\n This flag is used to focus the first option when the dropdown is opened\n * and reset after the first option is focused\n /\n @State() shouldFocusFirstOption: boolean = false;\n\n // Events\n /\n This event is fired when the selected options are changed\n /\n @Event({ bubbles: true, composed: true }) selectedOptionsChanged!: EventEmitter<{\n value: string[];\n name: string;\n }>;\n\n areOptionsEqual(arr1: DropdownOption[], arr2: DropdownOption[]): boolean {\n if (arr1.length !== arr2.length) return false;\n\n // Sort both arrays by a consistent key (e.g., label and value)\n const sorted1 = [...arr1].sort((a, b) => a.label.localeCompare(b.label) \|\| a.value.localeCompare(b.value));\n const sorted2 = [...arr2].sort((a, b) => a.label.localeCompare(b.label) \|\| a.value.localeCompare(b.value));\n\n // Compare each object in the sorted arrays\n return sorted1.every((opt1, index) => {\n const opt2 = sorted2[index];\n return opt1.label === opt2.label && opt1.value === opt2.value;\n });\n }\n\n @Watch('options')\n optionsChangedHandler(newValue: DropdownOption[]) {\n if (!this.areOptionsEqual(newValue, this.availableOptions)) {\n this.availableOptions = newValue;\n }\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, _oldVal: ThemeConfig) {\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 componentDidLoad() {\n debug('multi-select-dropdown', 'componentDidLoad');\n if (this.options) {\n this.availableOptions = this.options;\n }\n this.applyThemeConfig(this.themeConfig);\n }\n\n componentDidRender() {\n debug('multi-select-dropdown', 'componentDidRender');\n if (this.isOpen && this.shouldFocusFirstOption) {\n // The dropdown is open and we should focus the first option\n this.ariaActivedescendant = this.availableOptions[0]?.value;\n this.focusOption(0);\n // Reset the flag\n this.shouldFocusFirstOption = 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 @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n const selectedOptions = this.availableOptions.filter(o => o.selected).map(o => o.value);\n if (this.required && (!selectedOptions \|\| selectedOptions.length <= 0)) {\n this.error = this.errorMessage \|\| this.selectAtLeastOneOptionLabel;\n }\n if (this.error) {\n event.preventDefault();\n }\n }\n\n // Methods\n\n selectOption(option: DropdownOption): void {\n this.availableOptions = this.availableOptions.map(o => {\n if (o.value === option.value) {\n o.selected = option.selected ? false : true;\n if (o.selected) {\n this.error = '';\n }\n }\n return o;\n });\n const selectedOptions = this.availableOptions.filter(o => o.selected).map(o => o.value);\n this.selectedOptionsChanged.emit({\n value: selectedOptions,\n name: this.name,\n });\n }\n\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n if (this.isOpen) {\n this.shouldFocusFirstOption = true;\n } else {\n this.ariaActivedescendant = '';\n }\n }\n\n @Method()\n async openDropdown(): Promise<void> {\n this.isOpen = true;\n this.shouldFocusFirstOption = true;\n }\n\n @Method()\n async closeDropdown(): Promise<void> {\n this.isOpen = false;\n this.ariaActivedescendant = '';\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 break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n handleListboxKeydown(e: KeyboardEvent) {\n const items = this.availableOptions;\n const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n\n switch (e.key) {\n case 'ArrowDown':\n case 'Tab': {\n if (!e.shiftKey) {\n e.preventDefault();\n const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = items[nextIndex].value;\n this.focusOption(nextIndex);\n } else {\n e.preventDefault();\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n }\n break;\n }\n case 'ArrowUp': {\n e.preventDefault();\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n break;\n }\n case 'Enter': {\n e.preventDefault();\n if (this.ariaActivedescendant) {\n this.selectOption(items[currentIndex]);\n }\n break;\n }\n case 'Escape': {\n this.isOpen = false;\n break;\n }\n }\n }\n\n focusOption(index: number) {\n const option = this.availableOptions[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 getSelectedOptions() {\n return this.availableOptions.filter(option => option.selected);\n }\n\n renderOption(option: DropdownOption) {\n return (\n <li\n key={option.value}\n id={option.value}\n role=\"option\"\n tabindex=\"0\"\n aria-selected={option.selected ? 'true' : 'false'}\n onClick={e => {\n e.stopImmediatePropagation();\n if (!option?.disabled) {\n this.selectOption(option);\n }\n }}\n class={{ selected: !!option.selected, disabled: !!option.disabled }}\n >\n <label htmlFor={option.value}>\n <input aria-hidden=\"true\" id={option.value} type=\"checkbox\" checked={option.selected} disabled={!!option?.disabled} />\n <span>{option.label}</span>\n </label>\n </li>\n );\n }\n\n render() {\n return (\n <Host>\n <div class=\"dropdown\" part=\"msd_dropdown\">\n <label class=\"dropdown-label\" part=\"msd_dropdown-label\">\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\"></span>}\n </p>\n <slot name=\"label-icon\" aria-hidden=\"true\"></slot>\n </label>\n <button\n name={this.name}\n part={`msd_dropdown-button ${this.error ? 'msd_dropdown-button--error' : ''}`}\n class={{ dropbtn: true, open: this.isOpen, error: !!this.error }}\n onClick={() => this.toggleDropdown()}\n disabled={this.readOnly}\n title={this.readOnly ? 'read-only field' : undefined}\n aria-haspopup=\"listbox\"\n aria-expanded={this.isOpen ? 'true' : 'false'}\n aria-label={this.name}\n onKeyDown={e => this.handleSelectButtonKeyDown(e)}\n >\n <slot name=\"select-icon\" aria-hidden=\"true\"></slot>\n <span class=\"selected-option\" part=\"msd_dropdown-button-selected-label\">\n {this.getSelectedOptions().length > 1\n ? this.multipleOptionsSelectedLabel\n : this.availableOptions.filter(o => o.selected)[0]?.label ?? this.selectAtLeastOneOptionLabel ?? this.availableOptions[0]?.label}\n </span>\n <span class={this.isOpen ? 'open' : 'closed'} aria-hidden=\"true\">\n <chevron-icon width=\"16\" height=\"16\" />\n </span>\n </button>\n {this.error ? (\n <span class=\"error\" part=\"msd_dropdown_error\">\n {this.error}\n </span>\n ) : null}\n <div class={'selected-options'}>\n {this.getSelectedOptions().map(option => (\n <span class=\"selected-option\">\n {option.label}\n <button disabled={this.readOnly \|\| !!option?.disabled} key={option.label} onClick={() => this.selectOption(option)}>\n <close-icon />\n </button>\n </span>\n ))}\n </div>\n {this.isOpen ? (\n <div class=\"dropdown-content\" part=\"msd_dropdown-content\">\n <ul\n tabindex=\"-1\"\n role=\"listbox\"\n aria-label={this.name}\n aria-multiselectable={true}\n aria-activedescendant={this.ariaActivedescendant}\n onKeyDown={e => this.handleListboxKeydown(e)}\n >\n {this.availableOptions.map(option => this.renderOption(option))}\n </ul>\n </div>\n ) : null}\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"multi-select-dropdown.entry.esm.js","sources":["src/components/design-system/multi-select-dropdown/multi-select-dropdown.scss?tag=multi-select-dropdown&encapsulation=shadow","src/components/design-system/multi-select-dropdown/multi-select-dropdown.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n\n:host {\n display: block;\n width: inherit;\n @include default-css-variables;\n}\n\n.dropdown {\n display: inline-block;\n width: 100%;\n position: relative;\n\n .dropdown-label {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n color: var(--nylas-base-800);\n\n p {\n margin: 0;\n }\n\n span.required {\n color: var(--nylas-error);\n padding: 0 0.25rem;\n }\n }\n\n span.error {\n color: var(--nylas-error);\n font-size: 14px;\n }\n}\n\n.dropbtn {\n width: inherit;\n height: 48px;\n color: var(--nylas-base-900);\n padding: 0.5rem;\n font-size: 16px;\n cursor: pointer;\n display: flex;\n gap: 0.5rem;\n justify-content: space-between;\n align-items: center;\n background: var(--nylas-base-0);\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n\n &.focus {\n background: var(--nylas-base-0);\n }\n\n &.error {\n border: 1px solid var(--nylas-error);\n }\n\n &:hover,\n &:active {\n border: 1px solid var(--nylas-primary);\n }\n\n &:active {\n outline: 2px solid var(--nylas-primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n background: var(--nylas-base-100);\n }\n\n span {\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n }\n}\n\n.dropdown-content {\n display: block;\n margin-top: 0.5rem;\n background-color: var(--nylas-base-0);\n width: 100%;\n max-height: 336px;\n overflow: auto;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n top: calc(48px + 24px);\n box-shadow: 0px 4px 6px -2px #0000000d;\n box-shadow: 0px 10px 15px -3px #0000001a;\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 label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n input {\n margin: 0;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n\n label {\n cursor: not-allowed;\n\n input {\n cursor: not-allowed;\n }\n }\n }\n }\n}\n\n.selected-options {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n padding: 0.5rem 0;\n margin-top: 0.25rem;\n\n .selected-option {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 4px 8px;\n border-radius: var(--nylas-border-radius-2x);\n background: var(--nylas-base-100);\n color: var(--nylas-base-800);\n font-size: 16px;\n font-weight: 500;\n line-height: 1.5rem;\n letter-spacing: 0.5px;\n\n button {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0;\n\n &:hover {\n color: var(--nylas-primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n background: var(--nylas-base-100);\n }\n }\n }\n}\n","import { debug } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { DropdownOption, ThemeConfig } from '@nylas/core';\n\n@Component({\n tag: 'multi-select-dropdown',\n styleUrl: 'multi-select-dropdown.scss',\n shadow: true,\n})\nexport class MultiSelectDropdown {\n @Element() el!: HTMLElement;\n\n // Props\n /\n The name of the dropdown\n /\n @Prop() name!: string;\n\n /\n The label of the dropdown\n /\n @Prop() label?: string;\n\n /\n The options to display in the dropdown\n /\n @Prop() options: DropdownOption[] = [];\n\n /\n Error message to display\n /\n @Prop({ mutable: true }) error?: string = '';\n\n /\n The option to require selection of at leat one option.\n /\n @Prop() required?: boolean = false;\n\n /\n The property to make the multi-select dropdown read-only. If true, the dropdown cannot be edited.\n /\n @Prop() readOnly?: boolean = false;\n\n /\n Multiple options selected label\n /\n @Prop() multipleOptionsSelectedLabel?: string = 'Multiple options selected';\n\n /\n Select at least one option label\n /\n @Prop() selectAtLeastOneOptionLabel?: string = 'Please select at least one option';\n\n /\n The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /\n The error message to display\n /\n @Prop() errorMessage?: string = 'Please select at least one option.';\n\n // States\n /\n The copy of the options to display in the dropdown\n /\n @State() availableOptions: DropdownOption[] = this.options;\n /\n The open state of the dropdown\n /\n @State() isOpen: boolean = false;\n /\n The aria-activedescendant attribute for the listbox element to indicate the currently active\n /\n @State() ariaActivedescendant: string = '';\n\n /\n This flag is used to focus the first option when the dropdown is opened\n * and reset after the first option is focused\n /\n @State() shouldFocusFirstOption: boolean = false;\n\n // Events\n /\n This event is fired when the selected options are changed\n /\n @Event({ bubbles: true, composed: true }) selectedOptionsChanged!: EventEmitter<{\n value: string[];\n name: string;\n }>;\n\n areOptionsEqual(arr1: DropdownOption[], arr2: DropdownOption[]): boolean {\n if (arr1.length !== arr2.length) return false;\n\n // Sort both arrays by a consistent key (e.g., label and value)\n const sorted1 = [...arr1].sort((a, b) => a.label.localeCompare(b.label) \|\| a.value.localeCompare(b.value));\n const sorted2 = [...arr2].sort((a, b) => a.label.localeCompare(b.label) \|\| a.value.localeCompare(b.value));\n\n // Compare each object in the sorted arrays\n return sorted1.every((opt1, index) => {\n const opt2 = sorted2[index];\n return opt1.label === opt2.label && opt1.value === opt2.value;\n });\n }\n\n @Watch('options')\n optionsChangedHandler(newValue: DropdownOption[]) {\n if (!this.areOptionsEqual(newValue, this.availableOptions)) {\n this.availableOptions = newValue;\n }\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, _oldVal: ThemeConfig) {\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 debug('multi-select-dropdown', 'componentWillLoad');\n this.applyThemeConfig(this.themeConfig);\n }\n\n componentDidLoad() {\n debug('multi-select-dropdown', 'componentDidLoad');\n if (this.options) {\n this.availableOptions = this.options;\n }\n this.applyThemeConfig(this.themeConfig);\n }\n\n componentDidRender() {\n debug('multi-select-dropdown', 'componentDidRender');\n if (this.isOpen && this.shouldFocusFirstOption) {\n // The dropdown is open and we should focus the first option\n this.ariaActivedescendant = this.availableOptions[0]?.value;\n this.focusOption(0);\n // Reset the flag\n this.shouldFocusFirstOption = 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 @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n const selectedOptions = this.availableOptions.filter(o => o.selected).map(o => o.value);\n if (this.required && (!selectedOptions \|\| selectedOptions.length <= 0)) {\n this.error = this.errorMessage \|\| this.selectAtLeastOneOptionLabel;\n }\n if (this.error) {\n event.preventDefault();\n }\n }\n\n // Methods\n\n selectOption(option: DropdownOption): void {\n this.availableOptions = this.availableOptions.map(o => {\n if (o.value === option.value) {\n o.selected = option.selected ? false : true;\n if (o.selected) {\n this.error = '';\n }\n }\n return o;\n });\n const selectedOptions = this.availableOptions.filter(o => o.selected).map(o => o.value);\n this.selectedOptionsChanged.emit({\n value: selectedOptions,\n name: this.name,\n });\n }\n\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n if (this.isOpen) {\n this.shouldFocusFirstOption = true;\n } else {\n this.ariaActivedescendant = '';\n }\n }\n\n @Method()\n async openDropdown(): Promise<void> {\n this.isOpen = true;\n this.shouldFocusFirstOption = true;\n }\n\n @Method()\n async closeDropdown(): Promise<void> {\n this.isOpen = false;\n this.ariaActivedescendant = '';\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 break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n handleListboxKeydown(e: KeyboardEvent) {\n const items = this.availableOptions;\n const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n\n switch (e.key) {\n case 'ArrowDown':\n case 'Tab': {\n if (!e.shiftKey) {\n e.preventDefault();\n const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = items[nextIndex].value;\n this.focusOption(nextIndex);\n } else {\n e.preventDefault();\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n }\n break;\n }\n case 'ArrowUp': {\n e.preventDefault();\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n break;\n }\n case 'Enter': {\n e.preventDefault();\n if (this.ariaActivedescendant) {\n this.selectOption(items[currentIndex]);\n }\n break;\n }\n case 'Escape': {\n this.isOpen = false;\n break;\n }\n }\n }\n\n focusOption(index: number) {\n const option = this.availableOptions[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 getSelectedOptions() {\n return this.availableOptions.filter(option => option.selected);\n }\n\n renderOption(option: DropdownOption) {\n return (\n <li\n key={option.value}\n id={option.value}\n role=\"option\"\n tabindex=\"0\"\n aria-selected={option.selected ? 'true' : 'false'}\n onClick={e => {\n e.stopImmediatePropagation();\n if (!option?.disabled) {\n this.selectOption(option);\n }\n }}\n class={{ selected: !!option.selected, disabled: !!option.disabled }}\n >\n <label htmlFor={option.value}>\n <input aria-hidden=\"true\" id={option.value} type=\"checkbox\" checked={option.selected} disabled={!!option?.disabled} />\n <span>{option.label}</span>\n </label>\n </li>\n );\n }\n\n render() {\n return (\n <Host>\n <div class=\"dropdown\" part=\"msd_dropdown\">\n <label class=\"dropdown-label\" part=\"msd_dropdown-label\">\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\"></span>}\n </p>\n <slot name=\"label-icon\" aria-hidden=\"true\"></slot>\n </label>\n <button\n name={this.name}\n part={`msd_dropdown-button ${this.error ? 'msd_dropdown-button--error' : ''}`}\n class={{ dropbtn: true, open: this.isOpen, error: !!this.error }}\n onClick={() => this.toggleDropdown()}\n disabled={this.readOnly}\n title={this.readOnly ? 'read-only field' : undefined}\n aria-haspopup=\"listbox\"\n aria-expanded={this.isOpen ? 'true' : 'false'}\n aria-label={this.name}\n onKeyDown={e => this.handleSelectButtonKeyDown(e)}\n >\n <slot name=\"select-icon\" aria-hidden=\"true\"></slot>\n <span class=\"selected-option\" part=\"msd_dropdown-button-selected-label\">\n {this.getSelectedOptions().length > 1\n ? this.multipleOptionsSelectedLabel\n : this.availableOptions.filter(o => o.selected)[0]?.label ?? this.selectAtLeastOneOptionLabel ?? this.availableOptions[0]?.label}\n </span>\n <span class={this.isOpen ? 'open' : 'closed'} aria-hidden=\"true\">\n <chevron-icon width=\"16\" height=\"16\" />\n </span>\n </button>\n {this.error ? (\n <span class=\"error\" part=\"msd_dropdown_error\">\n {this.error}\n </span>\n ) : null}\n <div class={'selected-options'}>\n {this.getSelectedOptions().map(option => (\n <span class=\"selected-option\">\n {option.label}\n <button disabled={this.readOnly \|\| !!option?.disabled} key={option.label} onClick={() => this.selectOption(option)}>\n <close-icon />\n </button>\n </span>\n ))}\n </div>\n {this.isOpen ? (\n <div class=\"dropdown-content\" part=\"msd_dropdown-content\">\n <ul\n tabindex=\"-1\"\n role=\"listbox\"\n aria-label={this.name}\n aria-multiselectable={true}\n aria-activedescendant={this.ariaActivedescendant}\n onKeyDown={e => this.handleListboxKeydown(e)}\n >\n {this.availableOptions.map(option => this.renderOption(option))}\n </ul>\n </div>\n ) : null}\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import{r as e,a as o,h as s,d as a,e as r}from"./index-B-KMpdMZ.js";import{b as n}from"./utils-Bj5Y75fX.js";const l=':host{display:block;width:inherit;--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}.dropdown{display:inline-block;width:100%;position:relative}.dropdown .dropdown-label{display:flex;align-items:center;gap:0.25rem;color:var(--nylas-base-800)}.dropdown .dropdown-label p{margin:0}.dropdown .dropdown-label span.required{color:var(--nylas-error);padding:0 0.25rem}.dropdown span.error{color:var(--nylas-error);font-size:14px}.dropbtn{width:inherit;height:48px;color:var(--nylas-base-900);padding:0.5rem;font-size:16px;cursor:pointer;display:flex;gap:0.5rem;justify-content:space-between;align-items:center;background:var(--nylas-base-0);border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.dropbtn.focus{background:var(--nylas-base-0)}.dropbtn.error{border:1px solid var(--nylas-error)}.dropbtn:hover,.dropbtn:active{border:1px solid var(--nylas-primary)}.dropbtn:active{outline:2px solid var(--nylas-primary)}.dropbtn:disabled{cursor:not-allowed;background:var(--nylas-base-100)}.dropbtn span.open{transform:rotate(90deg)}.dropbtn span.closed{transform:rotate(270deg)}.dropdown-content{display:block;margin-top:0.5rem;background-color:var(--nylas-base-0);width:100%;max-height:336px;overflow:auto;z-index:1;border-radius:4px;position:absolute;top:72px;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.0509803922);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1019607843)}.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 ul li label{display:flex;align-items:center;gap:0.5rem}.dropdown-content ul li label input{margin:0}.dropdown-content ul li.disabled{cursor:not-allowed;opacity:0.5}.dropdown-content ul li.disabled label{cursor:not-allowed}.dropdown-content ul li.disabled label input{cursor:not-allowed}.selected-options{display:flex;flex-wrap:wrap;gap:0.5rem;padding:0.5rem 0;margin-top:0.25rem}.selected-options .selected-option{display:flex;align-items:center;gap:0.5rem;padding:4px 8px;border-radius:var(--nylas-border-radius-2x);background:var(--nylas-base-100);color:var(--nylas-base-800);font-size:16px;font-weight:500;line-height:1.5rem;letter-spacing:0.5px}.selected-options .selected-option button{background:transparent;border:none;cursor:pointer;padding:0}.selected-options .selected-option button:hover{color:var(--nylas-primary)}.selected-options .selected-option button:disabled{cursor:not-allowed;background:var(--nylas-base-100)}';const t=class{constructor(s){e(this,s);this.selectedOptionsChanged=o(this,"selectedOptionsChanged",7);this.options=[];this.error="";this.required=false;this.readOnly=false;this.multipleOptionsSelectedLabel="Multiple options selected";this.selectAtLeastOneOptionLabel="Please select at least one option";this.errorMessage="Please select at least one option.";this.availableOptions=this.options;this.isOpen=false;this.ariaActivedescendant="";this.shouldFocusFirstOption=false}areOptionsEqual(e,o){if(e.length!==o.length)return false;const s=[...e].sort(((e,o)=>e.label.localeCompare(o.label)||e.value.localeCompare(o.value)));const a=[...o].sort(((e,o)=>e.label.localeCompare(o.label)||e.value.localeCompare(o.value)));return s.every(((e,o)=>{const s=a[o];return e.label===s.label&&e.value===s.value}))}optionsChangedHandler(e){if(!this.areOptionsEqual(e,this.availableOptions)){this.availableOptions=e}}themeConfigChangedHandler(e,o){this.applyThemeConfig(e)}applyThemeConfig(e){if(e){for(const[o,s]of Object.entries(e)){this.el.style.setProperty(`${o}`,s)}}}componentDidLoad(){n("multi-select-dropdown","componentDidLoad");if(this.options){this.availableOptions=this.options}this.applyThemeConfig(this.themeConfig)}componentDidRender(){n("multi-select-dropdown","componentDidRender");if(this.isOpen&&this.shouldFocusFirstOption){this.ariaActivedescendant=this.availableOptions[0]?.value;this.focusOption(0);this.shouldFocusFirstOption=false}}handleOutsideClick(e){const o=e.composedPath();const s=o.includes(this.el);if(!s&&this.isOpen){this.isOpen=false}}handleBookingFormSubmitted(e){const o=this.availableOptions.filter((e=>e.selected)).map((e=>e.value));if(this.required&&(!o||o.length<=0)){this.error=this.errorMessage||this.selectAtLeastOneOptionLabel}if(this.error){e.preventDefault()}}selectOption(e){this.availableOptions=this.availableOptions.map((o=>{if(o.value===e.value){o.selected=e.selected?false:true;if(o.selected){this.error=""}}return o}));const o=this.availableOptions.filter((e=>e.selected)).map((e=>e.value));this.selectedOptionsChanged.emit({value:o,name:this.name})}toggleDropdown(){this.isOpen=!this.isOpen;if(this.isOpen){this.shouldFocusFirstOption=true}else{this.ariaActivedescendant=""}}async openDropdown(){this.isOpen=true;this.shouldFocusFirstOption=true}async closeDropdown(){this.isOpen=false;this.ariaActivedescendant=""}handleSelectButtonKeyDown(e){switch(e.key){case"ArrowDown":case"Enter":e.preventDefault();if(!this.isOpen){this.toggleDropdown()}break;case"Escape":this.isOpen=false;break}}handleListboxKeydown(e){const o=this.availableOptions;const s=o.findIndex((e=>e.value===this.ariaActivedescendant));switch(e.key){case"ArrowDown":case"Tab":{if(!e.shiftKey){e.preventDefault();const a=s+1<o.length?s+1:0;this.ariaActivedescendant=o[a].value;this.focusOption(a)}else{e.preventDefault();const a=s-1>=0?s-1:o.length-1;this.ariaActivedescendant=o[a].value;this.focusOption(a)}break}case"ArrowUp":{e.preventDefault();const a=s-1>=0?s-1:o.length-1;this.ariaActivedescendant=o[a].value;this.focusOption(a);break}case"Enter":{e.preventDefault();if(this.ariaActivedescendant){this.selectOption(o[s])}break}case"Escape":{this.isOpen=false;break}}}focusOption(e){const o=this.availableOptions[e];if(!o)return;const s=o.value;const a=this.el.shadowRoot?.getElementById(s);if(a){a.focus();a.scrollIntoView({behavior:"smooth",block:"nearest"})}}getSelectedOptions(){return this.availableOptions.filter((e=>e.selected))}renderOption(e){return s("li",{key:e.value,id:e.value,role:"option",tabindex:"0","aria-selected":e.selected?"true":"false",onClick:o=>{o.stopImmediatePropagation();if(!e?.disabled){this.selectOption(e)}},class:{selected:!!e.selected,disabled:!!e.disabled}},s("label",{htmlFor:e.value},s("input",{"aria-hidden":"true",id:e.value,type:"checkbox",checked:e.selected,disabled:!!e?.disabled}),s("span",null,e.label)))}render(){return s(a,{key:"f671cf5510bbeb4a48717c0967c5c6cee484fbef"},s("div",{key:"c9718021ada85e4b82137142e4c5b95ba6386047",class:"dropdown",part:"msd_dropdown"},s("label",{key:"adad16467982aa99ca5223aac20398dbf6eaf8ea",class:"dropdown-label",part:"msd_dropdown-label"},s("p",{key:"e31e82ca389f0b0f65c9ea206683e7a274c402a0"},s("span",{key:"17f521440d334d9180bdddd7fd54f501b4cb7587",class:"label"},this.label),this.required&&s("span",{key:"eb9c5e7efb559b1ed08cf497b352d24e370fd48c",class:"required"},"*")),s("slot",{key:"577c2a4a7d23e9b1331d317f8dfacb9eb993f854",name:"label-icon","aria-hidden":"true"})),s("button",{key:"e439ac225508c56f171921f83c6af2e9116be887",name:this.name,part:`msd_dropdown-button ${this.error?"msd_dropdown-button--error":""}`,class:{dropbtn:true,open:this.isOpen,error:!!this.error},onClick:()=>this.toggleDropdown(),disabled:this.readOnly,title:this.readOnly?"read-only field":undefined,"aria-haspopup":"listbox","aria-expanded":this.isOpen?"true":"false","aria-label":this.name,onKeyDown:e=>this.handleSelectButtonKeyDown(e)},s("slot",{key:"b02f239c822c151c45ae2ed0ef5c31b5f9cc5c41",name:"select-icon","aria-hidden":"true"}),s("span",{key:"8ed8704fa6d573bc96d0a0bb446d2bc54cb552dd",class:"selected-option",part:"msd_dropdown-button-selected-label"},this.getSelectedOptions().length>1?this.multipleOptionsSelectedLabel:this.availableOptions.filter((e=>e.selected))[0]?.label??this.selectAtLeastOneOptionLabel??this.availableOptions[0]?.label),s("span",{key:"c29a4bc956f2622da919b4fdf3106da98e9d02cc",class:this.isOpen?"open":"closed","aria-hidden":"true"},s("chevron-icon",{key:"b34f94e1c457bddb11dbcf9fb6d197020f8bb619",width:"16",height:"16"}))),this.error?s("span",{class:"error",part:"msd_dropdown_error"},this.error):null,s("div",{key:"51e56b6be6b3744b33ca32924fcbcf05e3f63e8d",class:"selected-options"},this.getSelectedOptions().map((e=>s("span",{class:"selected-option"},e.label,s("button",{disabled:this.readOnly||!!e?.disabled,key:e.label,onClick:()=>this.selectOption(e)},s("close-icon",null)))))),this.isOpen?s("div",{class:"dropdown-content",part:"msd_dropdown-content"},s("ul",{tabindex:"-1",role:"listbox","aria-label":this.name,"aria-multiselectable":true,"aria-activedescendant":this.ariaActivedescendant,onKeyDown:e=>this.handleListboxKeydown(e)},this.availableOptions.map((e=>this.renderOption(e))))):null))}get el(){return r(this)}static get watchers(){return{options:["optionsChangedHandler"],themeConfig:["themeConfigChangedHandler"]}}};t.style=l;export{t as multi_select_dropdown};
+import{r as e,a as o,h as s,d as a,e as r}from"./index-Cbn5rIwb.js";import{b as n}from"./utils-DhmCcrVs.js";const l=':host{display:block;width:inherit;--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}.dropdown{display:inline-block;width:100%;position:relative}.dropdown .dropdown-label{display:flex;align-items:center;gap:0.25rem;color:var(--nylas-base-800)}.dropdown .dropdown-label p{margin:0}.dropdown .dropdown-label span.required{color:var(--nylas-error);padding:0 0.25rem}.dropdown span.error{color:var(--nylas-error);font-size:14px}.dropbtn{width:inherit;height:48px;color:var(--nylas-base-900);padding:0.5rem;font-size:16px;cursor:pointer;display:flex;gap:0.5rem;justify-content:space-between;align-items:center;background:var(--nylas-base-0);border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.dropbtn.focus{background:var(--nylas-base-0)}.dropbtn.error{border:1px solid var(--nylas-error)}.dropbtn:hover,.dropbtn:active{border:1px solid var(--nylas-primary)}.dropbtn:active{outline:2px solid var(--nylas-primary)}.dropbtn:disabled{cursor:not-allowed;background:var(--nylas-base-100)}.dropbtn span.open{transform:rotate(90deg)}.dropbtn span.closed{transform:rotate(270deg)}.dropdown-content{display:block;margin-top:0.5rem;background-color:var(--nylas-base-0);width:100%;max-height:336px;overflow:auto;z-index:1;border-radius:4px;position:absolute;top:72px;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.0509803922);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1019607843)}.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 ul li label{display:flex;align-items:center;gap:0.5rem}.dropdown-content ul li label input{margin:0}.dropdown-content ul li.disabled{cursor:not-allowed;opacity:0.5}.dropdown-content ul li.disabled label{cursor:not-allowed}.dropdown-content ul li.disabled label input{cursor:not-allowed}.selected-options{display:flex;flex-wrap:wrap;gap:0.5rem;padding:0.5rem 0;margin-top:0.25rem}.selected-options .selected-option{display:flex;align-items:center;gap:0.5rem;padding:4px 8px;border-radius:var(--nylas-border-radius-2x);background:var(--nylas-base-100);color:var(--nylas-base-800);font-size:16px;font-weight:500;line-height:1.5rem;letter-spacing:0.5px}.selected-options .selected-option button{background:transparent;border:none;cursor:pointer;padding:0}.selected-options .selected-option button:hover{color:var(--nylas-primary)}.selected-options .selected-option button:disabled{cursor:not-allowed;background:var(--nylas-base-100)}';const t=class{constructor(s){e(this,s);this.selectedOptionsChanged=o(this,"selectedOptionsChanged",7);this.options=[];this.error="";this.required=false;this.readOnly=false;this.multipleOptionsSelectedLabel="Multiple options selected";this.selectAtLeastOneOptionLabel="Please select at least one option";this.errorMessage="Please select at least one option.";this.availableOptions=this.options;this.isOpen=false;this.ariaActivedescendant="";this.shouldFocusFirstOption=false}areOptionsEqual(e,o){if(e.length!==o.length)return false;const s=[...e].sort(((e,o)=>e.label.localeCompare(o.label)||e.value.localeCompare(o.value)));const a=[...o].sort(((e,o)=>e.label.localeCompare(o.label)||e.value.localeCompare(o.value)));return s.every(((e,o)=>{const s=a[o];return e.label===s.label&&e.value===s.value}))}optionsChangedHandler(e){if(!this.areOptionsEqual(e,this.availableOptions)){this.availableOptions=e}}themeConfigChangedHandler(e,o){this.applyThemeConfig(e)}applyThemeConfig(e){if(e){for(const[o,s]of Object.entries(e)){this.el.style.setProperty(`${o}`,s)}}}componentWillLoad(){n("multi-select-dropdown","componentWillLoad");this.applyThemeConfig(this.themeConfig)}componentDidLoad(){n("multi-select-dropdown","componentDidLoad");if(this.options){this.availableOptions=this.options}this.applyThemeConfig(this.themeConfig)}componentDidRender(){n("multi-select-dropdown","componentDidRender");if(this.isOpen&&this.shouldFocusFirstOption){this.ariaActivedescendant=this.availableOptions[0]?.value;this.focusOption(0);this.shouldFocusFirstOption=false}}handleOutsideClick(e){const o=e.composedPath();const s=o.includes(this.el);if(!s&&this.isOpen){this.isOpen=false}}handleBookingFormSubmitted(e){const o=this.availableOptions.filter((e=>e.selected)).map((e=>e.value));if(this.required&&(!o||o.length<=0)){this.error=this.errorMessage||this.selectAtLeastOneOptionLabel}if(this.error){e.preventDefault()}}selectOption(e){this.availableOptions=this.availableOptions.map((o=>{if(o.value===e.value){o.selected=e.selected?false:true;if(o.selected){this.error=""}}return o}));const o=this.availableOptions.filter((e=>e.selected)).map((e=>e.value));this.selectedOptionsChanged.emit({value:o,name:this.name})}toggleDropdown(){this.isOpen=!this.isOpen;if(this.isOpen){this.shouldFocusFirstOption=true}else{this.ariaActivedescendant=""}}async openDropdown(){this.isOpen=true;this.shouldFocusFirstOption=true}async closeDropdown(){this.isOpen=false;this.ariaActivedescendant=""}handleSelectButtonKeyDown(e){switch(e.key){case"ArrowDown":case"Enter":e.preventDefault();if(!this.isOpen){this.toggleDropdown()}break;case"Escape":this.isOpen=false;break}}handleListboxKeydown(e){const o=this.availableOptions;const s=o.findIndex((e=>e.value===this.ariaActivedescendant));switch(e.key){case"ArrowDown":case"Tab":{if(!e.shiftKey){e.preventDefault();const a=s+1<o.length?s+1:0;this.ariaActivedescendant=o[a].value;this.focusOption(a)}else{e.preventDefault();const a=s-1>=0?s-1:o.length-1;this.ariaActivedescendant=o[a].value;this.focusOption(a)}break}case"ArrowUp":{e.preventDefault();const a=s-1>=0?s-1:o.length-1;this.ariaActivedescendant=o[a].value;this.focusOption(a);break}case"Enter":{e.preventDefault();if(this.ariaActivedescendant){this.selectOption(o[s])}break}case"Escape":{this.isOpen=false;break}}}focusOption(e){const o=this.availableOptions[e];if(!o)return;const s=o.value;const a=this.el.shadowRoot?.getElementById(s);if(a){a.focus();a.scrollIntoView({behavior:"smooth",block:"nearest"})}}getSelectedOptions(){return this.availableOptions.filter((e=>e.selected))}renderOption(e){return s("li",{key:e.value,id:e.value,role:"option",tabindex:"0","aria-selected":e.selected?"true":"false",onClick:o=>{o.stopImmediatePropagation();if(!e?.disabled){this.selectOption(e)}},class:{selected:!!e.selected,disabled:!!e.disabled}},s("label",{htmlFor:e.value},s("input",{"aria-hidden":"true",id:e.value,type:"checkbox",checked:e.selected,disabled:!!e?.disabled}),s("span",null,e.label)))}render(){return s(a,{key:"eee847fbae0455c13538baebdd5bdf7c0612717f"},s("div",{key:"30a0059093d66b6287cf7a6d9c0c854dd8c3be23",class:"dropdown",part:"msd_dropdown"},s("label",{key:"f0870d492dee356caab5abd69004a414447d46e3",class:"dropdown-label",part:"msd_dropdown-label"},s("p",{key:"9189a9384142edbb3d7b537f2add3a769d0ab35e"},s("span",{key:"1472a21d05699fd0f4feb6576c8cbabac99178c9",class:"label"},this.label),this.required&&s("span",{key:"9094357c69b6ac13924662be7d274a44be62b86a",class:"required"},"*")),s("slot",{key:"afc2d18ce76c3672294b9f39eff3d556fcabb397",name:"label-icon","aria-hidden":"true"})),s("button",{key:"429702243d62b1759722c56afedac3edbfb645d9",name:this.name,part:`msd_dropdown-button ${this.error?"msd_dropdown-button--error":""}`,class:{dropbtn:true,open:this.isOpen,error:!!this.error},onClick:()=>this.toggleDropdown(),disabled:this.readOnly,title:this.readOnly?"read-only field":undefined,"aria-haspopup":"listbox","aria-expanded":this.isOpen?"true":"false","aria-label":this.name,onKeyDown:e=>this.handleSelectButtonKeyDown(e)},s("slot",{key:"2dfbe2b8bbc2a1a8f6c32a2b5e121da447fcb68b",name:"select-icon","aria-hidden":"true"}),s("span",{key:"59a01aa11a746eca8b8a90a28a048cf38d64b875",class:"selected-option",part:"msd_dropdown-button-selected-label"},this.getSelectedOptions().length>1?this.multipleOptionsSelectedLabel:this.availableOptions.filter((e=>e.selected))[0]?.label??this.selectAtLeastOneOptionLabel??this.availableOptions[0]?.label),s("span",{key:"776337fa2567ed65726dae10a2d471b124620ac5",class:this.isOpen?"open":"closed","aria-hidden":"true"},s("chevron-icon",{key:"b6734a7439b3d07b6d046ed710fe60e0a8a7604a",width:"16",height:"16"}))),this.error?s("span",{class:"error",part:"msd_dropdown_error"},this.error):null,s("div",{key:"53e2bf031fd8b8c289b56331de232e400f76e0be",class:"selected-options"},this.getSelectedOptions().map((e=>s("span",{class:"selected-option"},e.label,s("button",{disabled:this.readOnly||!!e?.disabled,key:e.label,onClick:()=>this.selectOption(e)},s("close-icon",null)))))),this.isOpen?s("div",{class:"dropdown-content",part:"msd_dropdown-content"},s("ul",{tabindex:"-1",role:"listbox","aria-label":this.name,"aria-multiselectable":true,"aria-activedescendant":this.ariaActivedescendant,onKeyDown:e=>this.handleListboxKeydown(e)},this.availableOptions.map((e=>this.renderOption(e))))):null))}get el(){return r(this)}static get watchers(){return{options:["optionsChangedHandler"],themeConfig:["themeConfigChangedHandler"]}}};t.style=l;export{t as multi_select_dropdown};
 //# sourceMappingURL=multi-select-dropdown.entry.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"names":["multiSelectDropdownCss","MultiSelectDropdown","constructor","hostRef","this","options","error","required","readOnly","multipleOptionsSelectedLabel","selectAtLeastOneOptionLabel","errorMessage","availableOptions","isOpen","ariaActivedescendant","shouldFocusFirstOption","areOptionsEqual","arr1","arr2","length","sorted1","sort","a","b","label","localeCompare","value","sorted2","every","opt1","index","opt2","optionsChangedHandler","newValue","themeConfigChangedHandler","newVal","_oldVal","applyThemeConfig","themeConfig","key","Object","entries","el","style","setProperty","componentDidLoad","debug","componentDidRender","focusOption","handleOutsideClick","event","path","composedPath","isClickInside","includes","handleBookingFormSubmitted","selectedOptions","filter","o","selected","map","preventDefault","selectOption","option","selectedOptionsChanged","emit","name","toggleDropdown","openDropdown","closeDropdown","handleSelectButtonKeyDown","handleListboxKeydown","e","items","currentIndex","findIndex","item","shiftKey","nextIndex","prevIndex","elementId","element","shadowRoot","getElementById","focus","scrollIntoView","behavior","block","getSelectedOptions","renderOption","h","id","role","tabindex","onClick","stopImmediatePropagation","disabled","class","htmlFor","type","checked","render","Host","part","dropbtn","open","title","undefined","onKeyDown","width","height"],"sources":["src/components/design-system/multi-select-dropdown/multi-select-dropdown.scss?tag=multi-select-dropdown&encapsulation=shadow","src/components/design-system/multi-select-dropdown/multi-select-dropdown.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n\n:host {\n display: block;\n width: inherit;\n @include default-css-variables;\n}\n\n.dropdown {\n display: inline-block;\n width: 100%;\n position: relative;\n\n .dropdown-label {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n color: var(--nylas-base-800);\n\n p {\n margin: 0;\n }\n\n span.required {\n color: var(--nylas-error);\n padding: 0 0.25rem;\n }\n }\n\n span.error {\n color: var(--nylas-error);\n font-size: 14px;\n }\n}\n\n.dropbtn {\n width: inherit;\n height: 48px;\n color: var(--nylas-base-900);\n padding: 0.5rem;\n font-size: 16px;\n cursor: pointer;\n display: flex;\n gap: 0.5rem;\n justify-content: space-between;\n align-items: center;\n background: var(--nylas-base-0);\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n\n &.focus {\n background: var(--nylas-base-0);\n }\n\n &.error {\n border: 1px solid var(--nylas-error);\n }\n\n &:hover,\n &:active {\n border: 1px solid var(--nylas-primary);\n }\n\n &:active {\n outline: 2px solid var(--nylas-primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n background: var(--nylas-base-100);\n }\n\n span {\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n }\n}\n\n.dropdown-content {\n display: block;\n margin-top: 0.5rem;\n background-color: var(--nylas-base-0);\n width: 100%;\n max-height: 336px;\n overflow: auto;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n top: calc(48px + 24px);\n box-shadow: 0px 4px 6px -2px #0000000d;\n box-shadow: 0px 10px 15px -3px #0000001a;\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 label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n input {\n margin: 0;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n\n label {\n cursor: not-allowed;\n\n input {\n cursor: not-allowed;\n }\n }\n }\n }\n}\n\n.selected-options {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n padding: 0.5rem 0;\n margin-top: 0.25rem;\n\n .selected-option {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 4px 8px;\n border-radius: var(--nylas-border-radius-2x);\n background: var(--nylas-base-100);\n color: var(--nylas-base-800);\n font-size: 16px;\n font-weight: 500;\n line-height: 1.5rem;\n letter-spacing: 0.5px;\n\n button {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0;\n\n &:hover {\n color: var(--nylas-primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n background: var(--nylas-base-100);\n }\n }\n }\n}\n","import { debug } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { DropdownOption, ThemeConfig } from '@nylas/core';\n\n@Component({\n tag: 'multi-select-dropdown',\n styleUrl: 'multi-select-dropdown.scss',\n shadow: true,\n})\nexport class MultiSelectDropdown {\n @Element() el!: HTMLElement;\n\n // Props\n /\n The name of the dropdown\n /\n @Prop() name!: string;\n\n /\n The label of the dropdown\n /\n @Prop() label?: string;\n\n /\n The options to display in the dropdown\n /\n @Prop() options: DropdownOption[] = [];\n\n /\n Error message to display\n /\n @Prop({ mutable: true }) error?: string = '';\n\n /\n The option to require selection of at leat one option.\n /\n @Prop() required?: boolean = false;\n\n /\n The property to make the multi-select dropdown read-only. If true, the dropdown cannot be edited.\n /\n @Prop() readOnly?: boolean = false;\n\n /\n Multiple options selected label\n /\n @Prop() multipleOptionsSelectedLabel?: string = 'Multiple options selected';\n\n /\n Select at least one option label\n /\n @Prop() selectAtLeastOneOptionLabel?: string = 'Please select at least one option';\n\n /\n The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /\n The error message to display\n /\n @Prop() errorMessage?: string = 'Please select at least one option.';\n\n // States\n /\n The copy of the options to display in the dropdown\n /\n @State() availableOptions: DropdownOption[] = this.options;\n /\n The open state of the dropdown\n /\n @State() isOpen: boolean = false;\n /\n The aria-activedescendant attribute for the listbox element to indicate the currently active\n /\n @State() ariaActivedescendant: string = '';\n\n /\n This flag is used to focus the first option when the dropdown is opened\n * and reset after the first option is focused\n /\n @State() shouldFocusFirstOption: boolean = false;\n\n // Events\n /\n This event is fired when the selected options are changed\n /\n @Event({ bubbles: true, composed: true }) selectedOptionsChanged!: EventEmitter<{\n value: string[];\n name: string;\n }>;\n\n areOptionsEqual(arr1: DropdownOption[], arr2: DropdownOption[]): boolean {\n if (arr1.length !== arr2.length) return false;\n\n // Sort both arrays by a consistent key (e.g., label and value)\n const sorted1 = [...arr1].sort((a, b) => a.label.localeCompare(b.label) \|\| a.value.localeCompare(b.value));\n const sorted2 = [...arr2].sort((a, b) => a.label.localeCompare(b.label) \|\| a.value.localeCompare(b.value));\n\n // Compare each object in the sorted arrays\n return sorted1.every((opt1, index) => {\n const opt2 = sorted2[index];\n return opt1.label === opt2.label && opt1.value === opt2.value;\n });\n }\n\n @Watch('options')\n optionsChangedHandler(newValue: DropdownOption[]) {\n if (!this.areOptionsEqual(newValue, this.availableOptions)) {\n this.availableOptions = newValue;\n }\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, _oldVal: ThemeConfig) {\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 componentDidLoad() {\n debug('multi-select-dropdown', 'componentDidLoad');\n if (this.options) {\n this.availableOptions = this.options;\n }\n this.applyThemeConfig(this.themeConfig);\n }\n\n componentDidRender() {\n debug('multi-select-dropdown', 'componentDidRender');\n if (this.isOpen && this.shouldFocusFirstOption) {\n // The dropdown is open and we should focus the first option\n this.ariaActivedescendant = this.availableOptions[0]?.value;\n this.focusOption(0);\n // Reset the flag\n this.shouldFocusFirstOption = 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 @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n const selectedOptions = this.availableOptions.filter(o => o.selected).map(o => o.value);\n if (this.required && (!selectedOptions \|\| selectedOptions.length <= 0)) {\n this.error = this.errorMessage \|\| this.selectAtLeastOneOptionLabel;\n }\n if (this.error) {\n event.preventDefault();\n }\n }\n\n // Methods\n\n selectOption(option: DropdownOption): void {\n this.availableOptions = this.availableOptions.map(o => {\n if (o.value === option.value) {\n o.selected = option.selected ? false : true;\n if (o.selected) {\n this.error = '';\n }\n }\n return o;\n });\n const selectedOptions = this.availableOptions.filter(o => o.selected).map(o => o.value);\n this.selectedOptionsChanged.emit({\n value: selectedOptions,\n name: this.name,\n });\n }\n\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n if (this.isOpen) {\n this.shouldFocusFirstOption = true;\n } else {\n this.ariaActivedescendant = '';\n }\n }\n\n @Method()\n async openDropdown(): Promise<void> {\n this.isOpen = true;\n this.shouldFocusFirstOption = true;\n }\n\n @Method()\n async closeDropdown(): Promise<void> {\n this.isOpen = false;\n this.ariaActivedescendant = '';\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 break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n handleListboxKeydown(e: KeyboardEvent) {\n const items = this.availableOptions;\n const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n\n switch (e.key) {\n case 'ArrowDown':\n case 'Tab': {\n if (!e.shiftKey) {\n e.preventDefault();\n const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = items[nextIndex].value;\n this.focusOption(nextIndex);\n } else {\n e.preventDefault();\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n }\n break;\n }\n case 'ArrowUp': {\n e.preventDefault();\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n break;\n }\n case 'Enter': {\n e.preventDefault();\n if (this.ariaActivedescendant) {\n this.selectOption(items[currentIndex]);\n }\n break;\n }\n case 'Escape': {\n this.isOpen = false;\n break;\n }\n }\n }\n\n focusOption(index: number) {\n const option = this.availableOptions[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 getSelectedOptions() {\n return this.availableOptions.filter(option => option.selected);\n }\n\n renderOption(option: DropdownOption) {\n return (\n <li\n key={option.value}\n id={option.value}\n role=\"option\"\n tabindex=\"0\"\n aria-selected={option.selected ? 'true' : 'false'}\n onClick={e => {\n e.stopImmediatePropagation();\n if (!option?.disabled) {\n this.selectOption(option);\n }\n }}\n class={{ selected: !!option.selected, disabled: !!option.disabled }}\n >\n <label htmlFor={option.value}>\n <input aria-hidden=\"true\" id={option.value} type=\"checkbox\" checked={option.selected} disabled={!!option?.disabled} />\n <span>{option.label}</span>\n </label>\n </li>\n );\n }\n\n render() {\n return (\n <Host>\n <div class=\"dropdown\" part=\"msd_dropdown\">\n <label class=\"dropdown-label\" part=\"msd_dropdown-label\">\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\"></span>}\n </p>\n <slot name=\"label-icon\" aria-hidden=\"true\"></slot>\n </label>\n <button\n name={this.name}\n part={`msd_dropdown-button ${this.error ? 'msd_dropdown-button--error' : ''}`}\n class={{ dropbtn: true, open: this.isOpen, error: !!this.error }}\n onClick={() => this.toggleDropdown()}\n disabled={this.readOnly}\n title={this.readOnly ? 'read-only field' : undefined}\n aria-haspopup=\"listbox\"\n aria-expanded={this.isOpen ? 'true' : 'false'}\n aria-label={this.name}\n onKeyDown={e => this.handleSelectButtonKeyDown(e)}\n >\n <slot name=\"select-icon\" aria-hidden=\"true\"></slot>\n <span class=\"selected-option\" part=\"msd_dropdown-button-selected-label\">\n {this.getSelectedOptions().length > 1\n ? this.multipleOptionsSelectedLabel\n : this.availableOptions.filter(o => o.selected)[0]?.label ?? this.selectAtLeastOneOptionLabel ?? this.availableOptions[0]?.label}\n </span>\n <span class={this.isOpen ? 'open' : 'closed'} aria-hidden=\"true\">\n <chevron-icon width=\"16\" height=\"16\" />\n </span>\n </button>\n {this.error ? (\n <span class=\"error\" part=\"msd_dropdown_error\">\n {this.error}\n </span>\n ) : null}\n <div class={'selected-options'}>\n {this.getSelectedOptions().map(option => (\n <span class=\"selected-option\">\n {option.label}\n <button disabled={this.readOnly \|\| !!option?.disabled} key={option.label} onClick={() => this.selectOption(option)}>\n <close-icon />\n </button>\n </span>\n ))}\n </div>\n {this.isOpen ? (\n <div class=\"dropdown-content\" part=\"msd_dropdown-content\">\n <ul\n tabindex=\"-1\"\n role=\"listbox\"\n aria-label={this.name}\n aria-multiselectable={true}\n aria-activedescendant={this.ariaActivedescendant}\n onKeyDown={e => this.handleListboxKeydown(e)}\n >\n {this.availableOptions.map(option => this.renderOption(option))}\n </ul>\n </div>\n ) : null}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["multiSelectDropdownCss","MultiSelectDropdown","constructor","hostRef","this","options","error","required","readOnly","multipleOptionsSelectedLabel","selectAtLeastOneOptionLabel","errorMessage","availableOptions","isOpen","ariaActivedescendant","shouldFocusFirstOption","areOptionsEqual","arr1","arr2","length","sorted1","sort","a","b","label","localeCompare","value","sorted2","every","opt1","index","opt2","optionsChangedHandler","newValue","themeConfigChangedHandler","newVal","_oldVal","applyThemeConfig","themeConfig","key","Object","entries","el","style","setProperty","componentWillLoad","debug","componentDidLoad","componentDidRender","focusOption","handleOutsideClick","event","path","composedPath","isClickInside","includes","handleBookingFormSubmitted","selectedOptions","filter","o","selected","map","preventDefault","selectOption","option","selectedOptionsChanged","emit","name","toggleDropdown","openDropdown","closeDropdown","handleSelectButtonKeyDown","handleListboxKeydown","e","items","currentIndex","findIndex","item","shiftKey","nextIndex","prevIndex","elementId","element","shadowRoot","getElementById","focus","scrollIntoView","behavior","block","getSelectedOptions","renderOption","h","id","role","tabindex","onClick","stopImmediatePropagation","disabled","class","htmlFor","type","checked","render","Host","part","dropbtn","open","title","undefined","onKeyDown","width","height"],"sources":["src/components/design-system/multi-select-dropdown/multi-select-dropdown.scss?tag=multi-select-dropdown&encapsulation=shadow","src/components/design-system/multi-select-dropdown/multi-select-dropdown.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n\n:host {\n display: block;\n width: inherit;\n @include default-css-variables;\n}\n\n.dropdown {\n display: inline-block;\n width: 100%;\n position: relative;\n\n .dropdown-label {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n color: var(--nylas-base-800);\n\n p {\n margin: 0;\n }\n\n span.required {\n color: var(--nylas-error);\n padding: 0 0.25rem;\n }\n }\n\n span.error {\n color: var(--nylas-error);\n font-size: 14px;\n }\n}\n\n.dropbtn {\n width: inherit;\n height: 48px;\n color: var(--nylas-base-900);\n padding: 0.5rem;\n font-size: 16px;\n cursor: pointer;\n display: flex;\n gap: 0.5rem;\n justify-content: space-between;\n align-items: center;\n background: var(--nylas-base-0);\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n\n &.focus {\n background: var(--nylas-base-0);\n }\n\n &.error {\n border: 1px solid var(--nylas-error);\n }\n\n &:hover,\n &:active {\n border: 1px solid var(--nylas-primary);\n }\n\n &:active {\n outline: 2px solid var(--nylas-primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n background: var(--nylas-base-100);\n }\n\n span {\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n }\n}\n\n.dropdown-content {\n display: block;\n margin-top: 0.5rem;\n background-color: var(--nylas-base-0);\n width: 100%;\n max-height: 336px;\n overflow: auto;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n top: calc(48px + 24px);\n box-shadow: 0px 4px 6px -2px #0000000d;\n box-shadow: 0px 10px 15px -3px #0000001a;\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 label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n input {\n margin: 0;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n\n label {\n cursor: not-allowed;\n\n input {\n cursor: not-allowed;\n }\n }\n }\n }\n}\n\n.selected-options {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n padding: 0.5rem 0;\n margin-top: 0.25rem;\n\n .selected-option {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 4px 8px;\n border-radius: var(--nylas-border-radius-2x);\n background: var(--nylas-base-100);\n color: var(--nylas-base-800);\n font-size: 16px;\n font-weight: 500;\n line-height: 1.5rem;\n letter-spacing: 0.5px;\n\n button {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0;\n\n &:hover {\n color: var(--nylas-primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n background: var(--nylas-base-100);\n }\n }\n }\n}\n","import { debug } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { DropdownOption, ThemeConfig } from '@nylas/core';\n\n@Component({\n tag: 'multi-select-dropdown',\n styleUrl: 'multi-select-dropdown.scss',\n shadow: true,\n})\nexport class MultiSelectDropdown {\n @Element() el!: HTMLElement;\n\n // Props\n /\n The name of the dropdown\n /\n @Prop() name!: string;\n\n /\n The label of the dropdown\n /\n @Prop() label?: string;\n\n /\n The options to display in the dropdown\n /\n @Prop() options: DropdownOption[] = [];\n\n /\n Error message to display\n /\n @Prop({ mutable: true }) error?: string = '';\n\n /\n The option to require selection of at leat one option.\n /\n @Prop() required?: boolean = false;\n\n /\n The property to make the multi-select dropdown read-only. If true, the dropdown cannot be edited.\n /\n @Prop() readOnly?: boolean = false;\n\n /\n Multiple options selected label\n /\n @Prop() multipleOptionsSelectedLabel?: string = 'Multiple options selected';\n\n /\n Select at least one option label\n /\n @Prop() selectAtLeastOneOptionLabel?: string = 'Please select at least one option';\n\n /\n The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /\n The error message to display\n /\n @Prop() errorMessage?: string = 'Please select at least one option.';\n\n // States\n /\n The copy of the options to display in the dropdown\n /\n @State() availableOptions: DropdownOption[] = this.options;\n /\n The open state of the dropdown\n /\n @State() isOpen: boolean = false;\n /\n The aria-activedescendant attribute for the listbox element to indicate the currently active\n /\n @State() ariaActivedescendant: string = '';\n\n /\n This flag is used to focus the first option when the dropdown is opened\n * and reset after the first option is focused\n /\n @State() shouldFocusFirstOption: boolean = false;\n\n // Events\n /\n This event is fired when the selected options are changed\n /\n @Event({ bubbles: true, composed: true }) selectedOptionsChanged!: EventEmitter<{\n value: string[];\n name: string;\n }>;\n\n areOptionsEqual(arr1: DropdownOption[], arr2: DropdownOption[]): boolean {\n if (arr1.length !== arr2.length) return false;\n\n // Sort both arrays by a consistent key (e.g., label and value)\n const sorted1 = [...arr1].sort((a, b) => a.label.localeCompare(b.label) \|\| a.value.localeCompare(b.value));\n const sorted2 = [...arr2].sort((a, b) => a.label.localeCompare(b.label) \|\| a.value.localeCompare(b.value));\n\n // Compare each object in the sorted arrays\n return sorted1.every((opt1, index) => {\n const opt2 = sorted2[index];\n return opt1.label === opt2.label && opt1.value === opt2.value;\n });\n }\n\n @Watch('options')\n optionsChangedHandler(newValue: DropdownOption[]) {\n if (!this.areOptionsEqual(newValue, this.availableOptions)) {\n this.availableOptions = newValue;\n }\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, _oldVal: ThemeConfig) {\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 debug('multi-select-dropdown', 'componentWillLoad');\n this.applyThemeConfig(this.themeConfig);\n }\n\n componentDidLoad() {\n debug('multi-select-dropdown', 'componentDidLoad');\n if (this.options) {\n this.availableOptions = this.options;\n }\n this.applyThemeConfig(this.themeConfig);\n }\n\n componentDidRender() {\n debug('multi-select-dropdown', 'componentDidRender');\n if (this.isOpen && this.shouldFocusFirstOption) {\n // The dropdown is open and we should focus the first option\n this.ariaActivedescendant = this.availableOptions[0]?.value;\n this.focusOption(0);\n // Reset the flag\n this.shouldFocusFirstOption = 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 @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n const selectedOptions = this.availableOptions.filter(o => o.selected).map(o => o.value);\n if (this.required && (!selectedOptions \|\| selectedOptions.length <= 0)) {\n this.error = this.errorMessage \|\| this.selectAtLeastOneOptionLabel;\n }\n if (this.error) {\n event.preventDefault();\n }\n }\n\n // Methods\n\n selectOption(option: DropdownOption): void {\n this.availableOptions = this.availableOptions.map(o => {\n if (o.value === option.value) {\n o.selected = option.selected ? false : true;\n if (o.selected) {\n this.error = '';\n }\n }\n return o;\n });\n const selectedOptions = this.availableOptions.filter(o => o.selected).map(o => o.value);\n this.selectedOptionsChanged.emit({\n value: selectedOptions,\n name: this.name,\n });\n }\n\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n if (this.isOpen) {\n this.shouldFocusFirstOption = true;\n } else {\n this.ariaActivedescendant = '';\n }\n }\n\n @Method()\n async openDropdown(): Promise<void> {\n this.isOpen = true;\n this.shouldFocusFirstOption = true;\n }\n\n @Method()\n async closeDropdown(): Promise<void> {\n this.isOpen = false;\n this.ariaActivedescendant = '';\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 break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n handleListboxKeydown(e: KeyboardEvent) {\n const items = this.availableOptions;\n const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n\n switch (e.key) {\n case 'ArrowDown':\n case 'Tab': {\n if (!e.shiftKey) {\n e.preventDefault();\n const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = items[nextIndex].value;\n this.focusOption(nextIndex);\n } else {\n e.preventDefault();\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n }\n break;\n }\n case 'ArrowUp': {\n e.preventDefault();\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n break;\n }\n case 'Enter': {\n e.preventDefault();\n if (this.ariaActivedescendant) {\n this.selectOption(items[currentIndex]);\n }\n break;\n }\n case 'Escape': {\n this.isOpen = false;\n break;\n }\n }\n }\n\n focusOption(index: number) {\n const option = this.availableOptions[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 getSelectedOptions() {\n return this.availableOptions.filter(option => option.selected);\n }\n\n renderOption(option: DropdownOption) {\n return (\n <li\n key={option.value}\n id={option.value}\n role=\"option\"\n tabindex=\"0\"\n aria-selected={option.selected ? 'true' : 'false'}\n onClick={e => {\n e.stopImmediatePropagation();\n if (!option?.disabled) {\n this.selectOption(option);\n }\n }}\n class={{ selected: !!option.selected, disabled: !!option.disabled }}\n >\n <label htmlFor={option.value}>\n <input aria-hidden=\"true\" id={option.value} type=\"checkbox\" checked={option.selected} disabled={!!option?.disabled} />\n <span>{option.label}</span>\n </label>\n </li>\n );\n }\n\n render() {\n return (\n <Host>\n <div class=\"dropdown\" part=\"msd_dropdown\">\n <label class=\"dropdown-label\" part=\"msd_dropdown-label\">\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\"></span>}\n </p>\n <slot name=\"label-icon\" aria-hidden=\"true\"></slot>\n </label>\n <button\n name={this.name}\n part={`msd_dropdown-button ${this.error ? 'msd_dropdown-button--error' : ''}`}\n class={{ dropbtn: true, open: this.isOpen, error: !!this.error }}\n onClick={() => this.toggleDropdown()}\n disabled={this.readOnly}\n title={this.readOnly ? 'read-only field' : undefined}\n aria-haspopup=\"listbox\"\n aria-expanded={this.isOpen ? 'true' : 'false'}\n aria-label={this.name}\n onKeyDown={e => this.handleSelectButtonKeyDown(e)}\n >\n <slot name=\"select-icon\" aria-hidden=\"true\"></slot>\n <span class=\"selected-option\" part=\"msd_dropdown-button-selected-label\">\n {this.getSelectedOptions().length > 1\n ? this.multipleOptionsSelectedLabel\n : this.availableOptions.filter(o => o.selected)[0]?.label ?? this.selectAtLeastOneOptionLabel ?? this.availableOptions[0]?.label}\n </span>\n <span class={this.isOpen ? 'open' : 'closed'} aria-hidden=\"true\">\n <chevron-icon width=\"16\" height=\"16\" />\n </span>\n </button>\n {this.error ? (\n <span class=\"error\" part=\"msd_dropdown_error\">\n {this.error}\n </span>\n ) : null}\n <div class={'selected-options'}>\n {this.getSelectedOptions().map(option => (\n <span class=\"selected-option\">\n {option.label}\n <button disabled={this.readOnly \|\| !!option?.disabled} key={option.label} onClick={() => this.selectOption(option)}>\n <close-icon />\n </button>\n </span>\n ))}\n </div>\n {this.isOpen ? (\n <div class=\"dropdown-content\" part=\"msd_dropdown-content\">\n <ul\n tabindex=\"-1\"\n role=\"listbox\"\n aria-label={this.name}\n aria-multiselectable={true}\n aria-activedescendant={this.ariaActivedescendant}\n onKeyDown={e => this.handleListboxKeydown(e)}\n >\n {this.availableOptions.map(option => this.renderOption(option))}\n </ul>\n </div>\n ) : null}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/nylas-web-elements/nylas-additional-participants.entry.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{r as a,a as t,h as i,d as n,e}from"./index-B-KMpdMZ.js";import{R as r}from"./register-component-BHk70oxk.js";import{b as s,i as l}from"./utils-Bj5Y75fX.js";const o=':host{display:block;margin:1rem;--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}.nylas-additional-participants__title{color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:600;line-height:20px;margin:0;text-align:left}.nylas-additional-participants__subtitle{color:var(--nylas-base-600);font-size:14px;font-style:normal;font-weight:400;line-height:20px;margin:0.25rem 0px 0px;text-align:left}.nylas-additional-participants__content{padding:1rem;display:flex;flex-direction:column;gap:1rem;background-color:var(--nylas-base-25)}.nylas-additional-participants__input_group{padding-top:8px;display:flex;flex-direction:column;gap:4px}.nylas-additional-participants__input_group label{display:flex;align-items:center;color:var(--nylas-base-800);font-size:14px;font-style:normal;font-weight:400;line-height:150%}.nylas-additional-participants__input_group label span.org-as-participant{width:max-content}.nylas-additional-participants__error{color:var(--nylas-error);font-size:14px;font-family:var(--nylas-font-family);font-weight:400;line-height:16px;margin:0;text-align:left}.nylas-additional-participants__input_wrapper{display:flex;border-width:1;border-radius:8px;border:1px solid var(--nylas-base-300)}.nylas-additional-participants__input_wrapper.error{border-color:var(--nylas-error)}.nylas-additional-participants__input_wrapper button{padding:12px;border:none;border-left:1px solid var(--nylas-base-300);background:none;cursor:pointer;color:var(--nylas-base-800)}.nylas-additional-participants__input_wrapper button:hover,.nylas-additional-participants__input_wrapper button:active{color:var(--nylas-primary)}.nylas-additional-participants__input_wrapper_organizer{border:none}.nylas-additional-participants__input{flex:1;display:flex;justify-content:space-between}.nylas-additional-participants__input input{border:none;outline:none;background:none;width:100%}.nylas-additional-participants__input input-dropdown{width:100%}.nylas-additional-participants__input input-dropdown::part(id_dropdown){width:100%;height:100%}.nylas-additional-participants__input input-dropdown::part(id_dropdown-input){height:100%;border-radius:var(--nylas-border-radius-2x);border:none;border-top-right-radius:initial;border-bottom-right-radius:initial;padding-left:16px}.nylas-additional-participants__input input-component::part(ic__input){background:var(--nylas-base-50)}.nylas-additional-participants__input input-component::part(ic__label){font-size:14px}.nylas-additional-participants__input input-component div.required-input{display:flex;gap:4px}.nylas-additional-participants__input input-component div.required-input label{display:flex;gap:4px;align-items:center}.nylas-additional-participants__input input-component div.required-input label tooltip-component#organizer_participant_tooltip::part(tc__content){left:-84px}.nylas-additional-participants__add{padding:12px;display:flex;align-items:center;border:none;background:none;cursor:pointer;color:var(--nylas-base-800)}.nylas-additional-participants__add span{padding:0 8px;font-size:16px;font-style:normal;font-weight:500}.nylas-additional-participants__add:hover,.nylas-additional-participants__add:active{color:var(--nylas-primary)}';var d=undefined&&undefined.__decorate||function(a,t,i,n){var e=arguments.length,r=e<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,i):n,s;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(a,t,i,n);else for(var l=a.length-1;l>=0;l--)if(s=a[l])r=(e<3?s(r):e>3?s(t,i,r):s(t,i))||r;return e>3&&r&&Object.defineProperty(t,i,r),r};var p=undefined&&undefined.__metadata||function(a,t){if(typeof Reflect==="object"&&typeof Reflect.metadata==="function")return Reflect.metadata(a,t)};const c=class{constructor(i){a(this,i);this.valueChanged=t(this,"valueChanged",7);if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}this.name="participants";this.participants=this.eventParticipants??[];this.participantErrors={};this.includeOrganizerAsParticipant=true;this.isRoundRobinConfig=false;this.error="";this.requiredError="";this.patternError=""}elementNameChangedHandler(a){s("nylas-additional-participants","elementNameChangedHandler",a);this.host.setAttribute("name",a)}selectedConfigurationAndCurrentUserChangedHandler(a,t,i){s("nylas-additional-participants","selectedConfigurationAndCurrentUserChangedHandler",a,this.currentUser);if(i==="selectedConfiguration"){this.updateState(a,this.currentUser,false)}else if(i==="currentUser"){this.updateState(this.selectedConfiguration,a,false)}}selectedLanguageChangedHandler(a,t){if(a===t)return;l.changeLanguage(a);this.requiredError=l.t("fieldRequired",{field:l.t("email")});this.patternError=l.t("invalidInputFormat",{field:l.t("email")});if(this.error){this.error=l.t("nylasAdditionalParticipants.error")}}themeConfigChangedHandler(a,t){if(a===t)return;this.applyThemeConfig(a)}connectedCallback(){s("nylas-additional-participants","connectedCallback")}componentWillLoad(){s("nylas-additional-participants","componentWillLoad");this.host.setAttribute("name",this.name)}componentDidLoad(){s("nylas-additional-participants","componentDidLoad");if(this.selectedConfiguration){this.updateState(this.selectedConfiguration,this.currentUser,false)}else if(this.eventParticipants){this.participants=this.eventParticipants||[];this.isRoundRobinConfig=this.roundRobinConfig||false;this.updateFormValue(true)}}disconnectedCallback(){s("nylas-additional-participants","disconnectedCallback")}updateState(a,t,i=true){this.isRoundRobinConfig=a?.availability?.availability_rules?.availability_method?a?.availability?.availability_rules?.availability_method!=="collective":false;this.participants=a?.participants||this.eventParticipants||[];this.includeOrganizerAsParticipant=this.isRoundRobinConfig&&this.participants.find((a=>a.email===t?.email))?true:false;this.updateOrganizerAsParticipant(i)}get isInternalsAvailable(){return this.internals!==undefined&&typeof this.internals.setFormValue==="function"&&typeof this.internals.setValidity==="function"}onInputOptionChanged(a){s("nylas-additional-participants","onInputOptionChanged");const t=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;const i=a.detail.name;const n=this.participantOptions?.find((t=>t.email===a.detail.value));if(!n&&this.isRoundRobinConfig){this.isInternalsAvailable&&this.internals.setValidity({customError:true},"For round robin configuration, participant should be selected from the dropdown.");this.participantErrors[i]="For round robin page, participant should be selected from the dropdown.";this.participants[i].is_valid=false;this.participants=[...this.participants];return}else if(!n&&!t.test(a.detail.value)){this.isInternalsAvailable&&this.internals.setValidity({customError:true},l.t("nylasAdditionalParticipants.error_email"));this.participantErrors[i]=l.t("nylasAdditionalParticipants.error_email");this.participants[i].is_valid=false;this.participants=[...this.participants];return}else{this.participantErrors[i]="";this.participants[i].is_valid=true;this.isInternalsAvailable&&this.internals.setValidity({})}this.participants[i].email=a.detail.value;const e=n?.calendars?.find((a=>a.is_primary));this.participants[i].availability=n&&e?.id?{calendar_ids:[e.id]}:n?.calendars[0]?.id?{calendar_ids:[n.calendars[0].id]}:undefined;this.participants[i].booking=n&&this.isRoundRobinConfig&&e?.id?{calendar_id:e.id}:this.isRoundRobinConfig&&n?.calendars[0]?.id?{calendar_id:n.calendars[0].id}:undefined;this.participants[i].name=n?.name||a.detail.value;this.participants=[...this.participants];this.updateFormValue()}updateOrganizerAsParticipant(a=true){const t=this.participants.find((a=>a.email===this.currentUser?.email));if(this.isRoundRobinConfig&&!t&&this.currentUser?.email){const a=this.currentUserCalendars?.find((a=>a.is_primary))?.id||this.currentUserCalendars?.[0]?.id||"primary";this.participants=[{name:this.currentUser?.name,email:this.currentUser?.email,is_organizer:true,availability:{calendar_ids:[a]},booking:{calendar_id:a}},...this.participants]}this.updateFormValue(a)}addParticipant(){s("nylas-additional-participants","addParticipant");this.participants=[...this.participants,{name:"",email:"",is_organizer:false}];this.updateFormValue()}removeParticipant(a){s("nylas-additional-participants","removeParticipant");this.participants=this.participants.filter(((t,i)=>i!==a));this.updateFormValue()}updateFormValue(a=true){s("nylas-additional-participants","updateFormValue");const t=this.isRoundRobinConfig?this.includeOrganizerAsParticipant?this.participants:this.participants.filter((a=>!a.is_organizer)):this.participants;if(t.length===0){this.error=l.t("nylasAdditionalParticipants.error");this.isInternalsAvailable&&this.internals.setValidity({customError:true},this.error)}else{this.isInternalsAvailable&&this.internals.setValidity({});this.error="";this.isInternalsAvailable&&this.internals.setFormValue(JSON.stringify(t),this.name);if(a){this.valueChanged.emit({value:JSON.stringify(t),name:this.name})}}}getArrayDifference(a,t){const i=a.filter((a=>!t.some((t=>a.email===t.email))));return i.map((a=>({value:a.email,label:a.email})))}applyThemeConfig(a){if(a){for(const[t,i]of Object.entries(a)){this.host.style.setProperty(`${t}`,i)}}}render(){return i(n,{key:"15de5136d4ca82a91232c393294934e03c878075",part:"nadtnlpart"},i("nylas-form-card",{key:"a559baa0eb32ecba2d3c419d31e0db8f5d5a61ec",exportparts:"nfc, nfc__header",themeConfig:this.themeConfig},i("h3",{key:"0c23308309cd706c0b5d6289d36ce20263c0ad11",slot:"header-title",class:"nylas-additional-participants__title",part:"nadtnlpart__title"},l.t("nylasAdditionalParticipants.headerTitle")),i("p",{key:"55354b875862591f0e1afce825be3dea91d06c87",slot:"header-subtitle",class:"nylas-additional-participants__subtitle",part:"nadtnlpart__subtitle"},l.t("nylasAdditionalParticipants.headerSubTitle")),i("div",{key:"ff842b91841f8a14960cbda6e4e87b731d4911a0",slot:"content",class:"nylas-additional-participants__content",part:"nadtnlpart__content"},i("div",{key:"ab359a596f23228353bf58d0c2d816f68a8d2f52"},this.participants.map(((a,t)=>i("div",{class:"nylas-additional-participants__input_group",part:"nadtnlpart__input_group"},!a.is_organizer&&i("label",null,`${l.t("nylasAdditionalParticipants.participant")} ${t}`),i("div",{part:"nadtnlpart__input_wrapper",class:{"nylas-additional-participants__input_wrapper":true,"nylas-additional-participants__input_wrapper_organizer":a?.is_organizer===true,"nylas-additional-participants__input_wrapper_invalid":a.is_valid===false,error:a.is_valid===false}},i("div",{class:{"nylas-additional-participants__input":true,organizer:a?.is_organizer===true},part:"nadtnlpart__input"},a.is_organizer?i("input-component",{class:"label-input",name:`${t}`,key:t,label:l.t("nylasAdditionalParticipants.organizer"),required:false,requiredError:this.requiredError,patternError:this.patternError,readOnly:a.is_organizer,defaultValue:a.email,themeConfig:this.themeConfig},this.isRoundRobinConfig&&i("div",{class:"required-input",slot:"additional-input"},i("input",{type:"checkbox",name:`organizer_participant`,id:`organizer_participant`,onClick:()=>{this.includeOrganizerAsParticipant=!this.includeOrganizerAsParticipant;this.updateFormValue()},checked:this.includeOrganizerAsParticipant}),i("label",{htmlFor:`organizer_participant`,"aria-label":"Include as participant"},i("span",{class:"org-as-participant",part:"nadtnlpart__org-as-participant"},l.t("nylasAdditionalParticipants.organizerAsParticipant")),i("tooltip-component",{id:"organizer_participant_tooltip"},i("info-icon",{slot:"tooltip-icon"}),i("span",{slot:"tooltip-content"},i("strong",null,l.t("nylasAdditionalParticipants.tooltip.includeOrganizer"),":")," ",l.t("nylasAdditionalParticipants.tooltip.includeOrganizerDesc")," ",i("br",null),i("strong",null,l.t("nylasAdditionalParticipants.tooltip.excludeOrganizer"),":")," ",l.t("nylasAdditionalParticipants.tooltip.excludeOrganizerDesc")))))):i("input-dropdown",{id:`${t}`,name:`${t}`,filterable:true,inputValue:a.email,options:this.getArrayDifference(this.participantOptions||[],this.participants),themeConfig:this.themeConfig}),!a.is_organizer&&i("button",{onClick:()=>this.removeParticipant(t),part:"nadtnlpart__remove-participant"},i("close-icon",null)))),!a.is_valid&&i("p",{class:"nylas-additional-participants__error",part:"nadtnlpart__error"},this.participantErrors[t])))),i("p",{key:"bc53d4d2398f5c702378c5683b962b5cfd44e2d4",class:"nylas-additional-participants__error",part:"nadtnlpart__error"},this.error)),i("button",{key:"8559ecfde46248ca894cf95a94d81cab2d1e3d63",class:"nylas-additional-participants__add",part:"nadtnlpart__add-participant",onClick:()=>this.addParticipant()},i("add-circle-icon",{key:"51c7d3585617b9dd49f2268ce25b75d750492938"})," ",i("span",{key:"d646ab7de1801a077adf6739e42b7427e933a6dd"},this.participants.length>1?l.t("nylasAdditionalParticipants.addParticipant",{context:"next"}):l.t("nylasAdditionalParticipants.addParticipant",{context:"first"}))))))}static get formAssociated(){return true}get host(){return e(this)}static get watchers(){return{name:["elementNameChangedHandler"],currentUser:["selectedConfigurationAndCurrentUserChangedHandler"],selectedConfiguration:["selectedConfigurationAndCurrentUserChangedHandler"],selectedLanguage:["selectedLanguageChangedHandler"],themeConfig:["themeConfigChangedHandler"]}}};d([r({name:"nylas-additional-participants",stateToProps:new Map([["schedulerConfig.additionalParticipants","participantOptions"],["schedulerConfig.selectedConfiguration","selectedConfiguration"],["schedulerConfig.currentUser","currentUser"],["schedulerConfig.calendars","currentUserCalendars"],["schedulerConfig.selectedLanguage","selectedLanguage"],["schedulerConfig.themeConfig","themeConfig"]]),eventToProps:{},fireRegisterEvent:true}),p("design:type",Function),p("design:paramtypes",[]),p("design:returntype",void 0)],c.prototype,"render",null);c.style=o;export{c as nylas_additional_participants};
+import{r as a,a as t,h as i,d as n,e}from"./index-Cbn5rIwb.js";import{R as r}from"./register-component-Blj8K64f.js";import{b as s,i as l}from"./utils-DhmCcrVs.js";const o=':host{display:block;margin:1rem;--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}.nylas-additional-participants__title{color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:600;line-height:20px;margin:0;text-align:left}.nylas-additional-participants__subtitle{color:var(--nylas-base-600);font-size:14px;font-style:normal;font-weight:400;line-height:20px;margin:0.25rem 0px 0px;text-align:left}.nylas-additional-participants__content{padding:1rem;display:flex;flex-direction:column;gap:1rem;background-color:var(--nylas-base-25)}.nylas-additional-participants__input_group{padding-top:8px;display:flex;flex-direction:column;gap:4px}.nylas-additional-participants__input_group label{display:flex;align-items:center;color:var(--nylas-base-800);font-size:14px;font-style:normal;font-weight:400;line-height:150%}.nylas-additional-participants__input_group label span.org-as-participant{width:max-content}.nylas-additional-participants__error{color:var(--nylas-error);font-size:14px;font-family:var(--nylas-font-family);font-weight:400;line-height:16px;margin:0;text-align:left}.nylas-additional-participants__input_wrapper{display:flex;border-width:1;border-radius:8px;border:1px solid var(--nylas-base-300)}.nylas-additional-participants__input_wrapper.error{border-color:var(--nylas-error)}.nylas-additional-participants__input_wrapper button{padding:12px;border:none;border-left:1px solid var(--nylas-base-300);background:none;cursor:pointer;color:var(--nylas-base-800)}.nylas-additional-participants__input_wrapper button:hover,.nylas-additional-participants__input_wrapper button:active{color:var(--nylas-primary)}.nylas-additional-participants__input_wrapper_organizer{border:none}.nylas-additional-participants__input{flex:1;display:flex;justify-content:space-between}.nylas-additional-participants__input input{border:none;outline:none;background:none;width:100%}.nylas-additional-participants__input input-dropdown{width:100%}.nylas-additional-participants__input input-dropdown::part(id_dropdown){width:100%;height:100%}.nylas-additional-participants__input input-dropdown::part(id_dropdown-input){height:100%;border-radius:var(--nylas-border-radius-2x);border:none;border-top-right-radius:initial;border-bottom-right-radius:initial;padding-left:16px}.nylas-additional-participants__input input-component::part(ic__input){background:var(--nylas-base-50)}.nylas-additional-participants__input input-component::part(ic__label){font-size:14px}.nylas-additional-participants__input input-component div.required-input{display:flex;gap:4px}.nylas-additional-participants__input input-component div.required-input label{display:flex;gap:4px;align-items:center}.nylas-additional-participants__input input-component div.required-input label tooltip-component#organizer_participant_tooltip::part(tc__content){left:-84px}.nylas-additional-participants__add{padding:12px;display:flex;align-items:center;border:none;background:none;cursor:pointer;color:var(--nylas-base-800)}.nylas-additional-participants__add span{padding:0 8px;font-size:16px;font-style:normal;font-weight:500}.nylas-additional-participants__add:hover,.nylas-additional-participants__add:active{color:var(--nylas-primary)}';var d=undefined&&undefined.__decorate||function(a,t,i,n){var e=arguments.length,r=e<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,i):n,s;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(a,t,i,n);else for(var l=a.length-1;l>=0;l--)if(s=a[l])r=(e<3?s(r):e>3?s(t,i,r):s(t,i))||r;return e>3&&r&&Object.defineProperty(t,i,r),r};var p=undefined&&undefined.__metadata||function(a,t){if(typeof Reflect==="object"&&typeof Reflect.metadata==="function")return Reflect.metadata(a,t)};const c=class{constructor(i){a(this,i);this.valueChanged=t(this,"valueChanged",7);if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}this.name="participants";this.participants=this.eventParticipants??[];this.participantErrors={};this.includeOrganizerAsParticipant=true;this.isRoundRobinConfig=false;this.error="";this.requiredError="";this.patternError=""}elementNameChangedHandler(a){s("nylas-additional-participants","elementNameChangedHandler",a);this.host.setAttribute("name",a)}selectedConfigurationAndCurrentUserChangedHandler(a,t,i){s("nylas-additional-participants","selectedConfigurationAndCurrentUserChangedHandler",a,this.currentUser);if(i==="selectedConfiguration"){this.updateState(a,this.currentUser,false)}else if(i==="currentUser"){this.updateState(this.selectedConfiguration,a,false)}}selectedLanguageChangedHandler(a,t){if(a===t)return;l.changeLanguage(a);this.requiredError=l.t("fieldRequired",{field:l.t("email")});this.patternError=l.t("invalidInputFormat",{field:l.t("email")});if(this.error){this.error=l.t("nylasAdditionalParticipants.error")}}themeConfigChangedHandler(a,t){if(a===t)return;this.applyThemeConfig(a)}connectedCallback(){s("nylas-additional-participants","connectedCallback")}componentWillLoad(){s("nylas-additional-participants","componentWillLoad");this.host.setAttribute("name",this.name)}componentDidLoad(){s("nylas-additional-participants","componentDidLoad");if(this.selectedConfiguration){this.updateState(this.selectedConfiguration,this.currentUser,false)}else if(this.eventParticipants){this.participants=this.eventParticipants||[];this.isRoundRobinConfig=this.roundRobinConfig||false;this.updateFormValue(true)}}disconnectedCallback(){s("nylas-additional-participants","disconnectedCallback")}updateState(a,t,i=true){this.isRoundRobinConfig=a?.availability?.availability_rules?.availability_method?a?.availability?.availability_rules?.availability_method!=="collective":false;this.participants=a?.participants||this.eventParticipants||[];this.includeOrganizerAsParticipant=this.isRoundRobinConfig&&this.participants.find((a=>a.email===t?.email))?true:false;this.updateOrganizerAsParticipant(i)}get isInternalsAvailable(){return this.internals!==undefined&&typeof this.internals.setFormValue==="function"&&typeof this.internals.setValidity==="function"}onInputOptionChanged(a){s("nylas-additional-participants","onInputOptionChanged");const t=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;const i=a.detail.name;const n=this.participantOptions?.find((t=>t.email===a.detail.value));if(!n&&this.isRoundRobinConfig){this.isInternalsAvailable&&this.internals.setValidity({customError:true},"For round robin configuration, participant should be selected from the dropdown.");this.participantErrors[i]="For round robin page, participant should be selected from the dropdown.";this.participants[i].is_valid=false;this.participants=[...this.participants];return}else if(!n&&!t.test(a.detail.value)){this.isInternalsAvailable&&this.internals.setValidity({customError:true},l.t("nylasAdditionalParticipants.error_email"));this.participantErrors[i]=l.t("nylasAdditionalParticipants.error_email");this.participants[i].is_valid=false;this.participants=[...this.participants];return}else{this.participantErrors[i]="";this.participants[i].is_valid=true;this.isInternalsAvailable&&this.internals.setValidity({})}this.participants[i].email=a.detail.value;const e=n?.calendars?.find((a=>a.is_primary));this.participants[i].availability=n&&e?.id?{calendar_ids:[e.id]}:n?.calendars[0]?.id?{calendar_ids:[n.calendars[0].id]}:undefined;this.participants[i].booking=n&&this.isRoundRobinConfig&&e?.id?{calendar_id:e.id}:this.isRoundRobinConfig&&n?.calendars[0]?.id?{calendar_id:n.calendars[0].id}:undefined;this.participants[i].name=n?.name||a.detail.value;this.participants=[...this.participants];this.updateFormValue()}updateOrganizerAsParticipant(a=true){const t=this.participants.find((a=>a.email===this.currentUser?.email));if(this.isRoundRobinConfig&&!t&&this.currentUser?.email){const a=this.currentUserCalendars?.find((a=>a.is_primary))?.id||this.currentUserCalendars?.[0]?.id||"primary";this.participants=[{name:this.currentUser?.name,email:this.currentUser?.email,is_organizer:true,availability:{calendar_ids:[a]},booking:{calendar_id:a}},...this.participants]}this.updateFormValue(a)}addParticipant(){s("nylas-additional-participants","addParticipant");this.participants=[...this.participants,{name:"",email:"",is_organizer:false}];this.updateFormValue()}removeParticipant(a){s("nylas-additional-participants","removeParticipant");this.participants=this.participants.filter(((t,i)=>i!==a));this.updateFormValue()}updateFormValue(a=true){s("nylas-additional-participants","updateFormValue");const t=this.isRoundRobinConfig?this.includeOrganizerAsParticipant?this.participants:this.participants.filter((a=>!a.is_organizer)):this.participants;if(t.length===0){this.error=l.t("nylasAdditionalParticipants.error");this.isInternalsAvailable&&this.internals.setValidity({customError:true},this.error)}else{this.isInternalsAvailable&&this.internals.setValidity({});this.error="";this.isInternalsAvailable&&this.internals.setFormValue(JSON.stringify(t),this.name);if(a){this.valueChanged.emit({value:JSON.stringify(t),name:this.name})}}}getArrayDifference(a,t){const i=a.filter((a=>!t.some((t=>a.email===t.email))));return i.map((a=>({value:a.email,label:a.email})))}applyThemeConfig(a){if(a){for(const[t,i]of Object.entries(a)){this.host.style.setProperty(`${t}`,i)}}}render(){return i(n,{key:"15de5136d4ca82a91232c393294934e03c878075",part:"nadtnlpart"},i("nylas-form-card",{key:"a559baa0eb32ecba2d3c419d31e0db8f5d5a61ec",exportparts:"nfc, nfc__header",themeConfig:this.themeConfig},i("h3",{key:"0c23308309cd706c0b5d6289d36ce20263c0ad11",slot:"header-title",class:"nylas-additional-participants__title",part:"nadtnlpart__title"},l.t("nylasAdditionalParticipants.headerTitle")),i("p",{key:"55354b875862591f0e1afce825be3dea91d06c87",slot:"header-subtitle",class:"nylas-additional-participants__subtitle",part:"nadtnlpart__subtitle"},l.t("nylasAdditionalParticipants.headerSubTitle")),i("div",{key:"ff842b91841f8a14960cbda6e4e87b731d4911a0",slot:"content",class:"nylas-additional-participants__content",part:"nadtnlpart__content"},i("div",{key:"ab359a596f23228353bf58d0c2d816f68a8d2f52"},this.participants.map(((a,t)=>i("div",{class:"nylas-additional-participants__input_group",part:"nadtnlpart__input_group"},!a.is_organizer&&i("label",null,`${l.t("nylasAdditionalParticipants.participant")} ${t}`),i("div",{part:"nadtnlpart__input_wrapper",class:{"nylas-additional-participants__input_wrapper":true,"nylas-additional-participants__input_wrapper_organizer":a?.is_organizer===true,"nylas-additional-participants__input_wrapper_invalid":a.is_valid===false,error:a.is_valid===false}},i("div",{class:{"nylas-additional-participants__input":true,organizer:a?.is_organizer===true},part:"nadtnlpart__input"},a.is_organizer?i("input-component",{class:"label-input",name:`${t}`,key:t,label:l.t("nylasAdditionalParticipants.organizer"),required:false,requiredError:this.requiredError,patternError:this.patternError,readOnly:a.is_organizer,defaultValue:a.email,themeConfig:this.themeConfig},this.isRoundRobinConfig&&i("div",{class:"required-input",slot:"additional-input"},i("input",{type:"checkbox",name:`organizer_participant`,id:`organizer_participant`,onClick:()=>{this.includeOrganizerAsParticipant=!this.includeOrganizerAsParticipant;this.updateFormValue()},checked:this.includeOrganizerAsParticipant}),i("label",{htmlFor:`organizer_participant`,"aria-label":"Include as participant"},i("span",{class:"org-as-participant",part:"nadtnlpart__org-as-participant"},l.t("nylasAdditionalParticipants.organizerAsParticipant")),i("tooltip-component",{id:"organizer_participant_tooltip"},i("info-icon",{slot:"tooltip-icon"}),i("span",{slot:"tooltip-content"},i("strong",null,l.t("nylasAdditionalParticipants.tooltip.includeOrganizer"),":")," ",l.t("nylasAdditionalParticipants.tooltip.includeOrganizerDesc")," ",i("br",null),i("strong",null,l.t("nylasAdditionalParticipants.tooltip.excludeOrganizer"),":")," ",l.t("nylasAdditionalParticipants.tooltip.excludeOrganizerDesc")))))):i("input-dropdown",{id:`${t}`,name:`${t}`,filterable:true,inputValue:a.email,options:this.getArrayDifference(this.participantOptions||[],this.participants),themeConfig:this.themeConfig}),!a.is_organizer&&i("button",{onClick:()=>this.removeParticipant(t),part:"nadtnlpart__remove-participant"},i("close-icon",null)))),!a.is_valid&&i("p",{class:"nylas-additional-participants__error",part:"nadtnlpart__error"},this.participantErrors[t])))),i("p",{key:"bc53d4d2398f5c702378c5683b962b5cfd44e2d4",class:"nylas-additional-participants__error",part:"nadtnlpart__error"},this.error)),i("button",{key:"8559ecfde46248ca894cf95a94d81cab2d1e3d63",class:"nylas-additional-participants__add",part:"nadtnlpart__add-participant",onClick:()=>this.addParticipant()},i("add-circle-icon",{key:"51c7d3585617b9dd49f2268ce25b75d750492938"})," ",i("span",{key:"d646ab7de1801a077adf6739e42b7427e933a6dd"},this.participants.length>1?l.t("nylasAdditionalParticipants.addParticipant",{context:"next"}):l.t("nylasAdditionalParticipants.addParticipant",{context:"first"}))))))}static get formAssociated(){return true}get host(){return e(this)}static get watchers(){return{name:["elementNameChangedHandler"],currentUser:["selectedConfigurationAndCurrentUserChangedHandler"],selectedConfiguration:["selectedConfigurationAndCurrentUserChangedHandler"],selectedLanguage:["selectedLanguageChangedHandler"],themeConfig:["themeConfigChangedHandler"]}}};d([r({name:"nylas-additional-participants",stateToProps:new Map([["schedulerConfig.additionalParticipants","participantOptions"],["schedulerConfig.selectedConfiguration","selectedConfiguration"],["schedulerConfig.currentUser","currentUser"],["schedulerConfig.calendars","currentUserCalendars"],["schedulerConfig.selectedLanguage","selectedLanguage"],["schedulerConfig.themeConfig","themeConfig"]]),eventToProps:{},fireRegisterEvent:true}),p("design:type",Function),p("design:paramtypes",[]),p("design:returntype",void 0)],c.prototype,"render",null);c.style=o;export{c as nylas_additional_participants};
 //# sourceMappingURL=nylas-additional-participants.entry.js.map

package/dist/nylas-web-elements/{nylas-api-request-B1V2koVc.js → nylas-api-request-rYAjhY1J.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{a as t}from"./utils-Bj5Y75fX.js";class e{}class s{constructor(t){this.defaultAuthArgs=[];this.session=t}setActiveGrantId(t){this.activeGrantId=t}async request({method:e,path:s,body:i,headers:n}){try{const r=await this.session.fetch(`grants/me/${s}`,{method:e,headers:n?new Headers(n):undefined,body:i,...this.session.isMultiAccount()&&this.activeGrantId?{grant_id:this.activeGrantId}:{}});if(typeof r==="undefined"){throw new Error("Response is undefined")}return t(r)}catch(e){let s=String(e);if(String(e).includes("Access token not found")){s="Session expired, please log in again. Redirecting...";setTimeout((()=>{localStorage.removeItem("grant");localStorage.removeItem("user");window.location.reload()}),1e3)}return t(null,{message:s})}}async currentUser(){const t=this.session.isMultiAccount()?this.activeGrantId:undefined;const e=await this.session.getProfile(t);if(await this.session.isLoggedIn()){const t=await this.session.fetch(`grants/me`,{method:"GET",...this.session.isMultiAccount()&&this.activeGrantId?{grant_id:this.activeGrantId}:{}});const s=t.data;if(!e||!s){return null}const i=s.email;return{id:e.sub,email:i,name:e.name,provider:e.provider}}return null}async authenticationUrl(t){const e=t?.provider||"google";const s=this.defaultAuthArgs.find((t=>t.provider===e));let i=s||{};if(t){i={...i,...t}}return this.session.auth(i)}setDefaultAuthArgs(t){this.defaultAuthArgs=t}}export{s as N};
-//# sourceMappingURL=nylas-api-request-B1V2koVc.js.map
+import{a as t}from"./utils-DhmCcrVs.js";class e{}class s{constructor(t){this.defaultAuthArgs=[];this.session=t}setActiveGrantId(t){this.activeGrantId=t}async request({method:e,path:s,body:i,headers:n}){try{const r=await this.session.fetch(`grants/me/${s}`,{method:e,headers:n?new Headers(n):undefined,body:i,...this.session.isMultiAccount()&&this.activeGrantId?{grant_id:this.activeGrantId}:{}});if(typeof r==="undefined"){throw new Error("Response is undefined")}return t(r)}catch(e){let s=String(e);if(String(e).includes("Access token not found")){s="Session expired, please log in again. Redirecting...";setTimeout((()=>{localStorage.removeItem("grant");localStorage.removeItem("user");window.location.reload()}),1e3)}return t(null,{message:s})}}async currentUser(){const t=this.session.isMultiAccount()?this.activeGrantId:undefined;const e=await this.session.getProfile(t);if(await this.session.isLoggedIn()){const t=await this.session.fetch(`grants/me`,{method:"GET",...this.session.isMultiAccount()&&this.activeGrantId?{grant_id:this.activeGrantId}:{}});const s=t.data;if(!e||!s){return null}const i=s.email;return{id:e.sub,email:i,name:e.name,provider:e.provider}}return null}async authenticationUrl(t){const e=t?.provider||"google";const s=this.defaultAuthArgs.find((t=>t.provider===e));let i=s||{};if(t){i={...i,...t}}return this.session.auth(i)}setDefaultAuthArgs(t){this.defaultAuthArgs=t}}export{s as N};
+//# sourceMappingURL=nylas-api-request-rYAjhY1J.js.map

package/dist/nylas-web-elements/{nylas-api-request-B1V2koVc.js.map → nylas-api-request-rYAjhY1J.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nylas-api-request-~~B1V2koVc~~.js","sources":["src/common/nylas-api-request.ts"],"sourcesContent":["import { dataResponse } from '@/utils/utils';\nimport type { NylasSessions } from '@nylas/identity';\nimport { DataResponseReturnType } from './types';\n\n/*\n Arguments for making a request to the Nylas API.\n /\nexport type NylasRequestArgs = {\n method: 'GET' \| 'POST' \| 'PUT' \| 'DELETE' \| 'PATCH';\n path: string;\n body?: any;\n headers?: Record<string, string>;\n};\n\n/\n A model representing a user in the Nylas Identity system.\n /\nexport type User = {\n id: string;\n email: string;\n name?: string;\n provider?: string;\n};\n\n/\n Arguments for authenticating a user with the Nylas Identity system.\n /\nexport type AuthArgs = {\n /\n The provider of the user's email address.\n /\n provider?: string;\n /\n A list of permission scopes for the provider.\n /\n scope?: Array<string>;\n /\n The login hint associated with the user.\n /\n loginHint?: string;\n /\n Whether to include grant scopes in the auth exchange.\n /\n includeGrantScopes?: boolean;\n prompt?: string;\n metadata?: string;\n state?: string;\n};\n\n/\n Interface for making requests to the Nylas API.\n \n This is an abstract class that is meant to be implemented by customers to provide their own\n * implementation of making requests to the Nylas API. This allows customers to use their own\n * authentication mechanism, or to use a different HTTP client library.\n /\nexport abstract class NylasApiRequest {\n /\n This method should make an authenticated request to the Nylas API.\n * Note: It should not throw an error if the request fails, but should return an object with the error\n * information as part of the tuple returned.\n * @param args NylasRequestArgs\n /\n abstract request<T = any>(args: NylasRequestArgs): Promise<DataResponseReturnType<T>>;\n\n /\n This method should return the current user's information.\n /\n\n abstract currentUser(): Promise<User \| null>;\n\n /\n This method should set the default authentication arguments to use when authenticating the user.\n /\n abstract setDefaultAuthArgs(authArgs: AuthArgs[]): void;\n\n /\n This method should return the URL to redirect the user to for authentication.\n /\n abstract authenticationUrl(authArgs?: AuthArgs): Promise<string \| undefined>;\n}\n\n/\n A wrapper around the Nylas Identity session that implements the NylasApiRequest interface.\n * This class is used by the Nylas Web Elements to make requests to the Nylas API if no custom\n * implementation of NylasApiRequest is provided.\n /\nexport class NylasIdentityRequestWrapper implements NylasApiRequest {\n /\n The Nylas Identity session instance.\n /\n private session: NylasSessions;\n\n /\n The grant_id to use for requests, if there is multi-account support\n * enabled in the Nylas Identity settings.\n /\n private activeGrantId?: string;\n\n /\n The default authentication arguments to use when authenticating the user.\n /\n private defaultAuthArgs: AuthArgs[] = [];\n\n /\n Constructor for the NylasIdentityRequestWrapper class.\n * @param session The Nylas Identity session instance.\n /\n constructor(session: NylasSessions) {\n this.session = session;\n }\n\n /\n This method sets the grant_id to use for requests.\n * This is used when there is multi-account support enabled in the Nylas Identity settings.\n \n @param grantId\n /\n setActiveGrantId(grantId: string) {\n this.activeGrantId = grantId;\n }\n\n /\n This method makes a request to the Nylas API, using the Nylas Identity's fetch method.\n \n The `grants/me/` prefix is added because all requests made from the browser to the Nylas API\n * must be made on behalf of the currently logged in user with a valid access token.\n \n @param NylasRequestArgs\n * @returns Promise<[T \| null, NylasErrorResponse['error'] \| null]>\n /\n async request<T>({ method, path, body, headers }: NylasRequestArgs): Promise<DataResponseReturnType<T>> {\n try {\n const response = await this.session.fetch(`grants/me/${path}`, {\n method,\n headers: headers ? new Headers(headers) : undefined,\n body,\n ...(this.session.isMultiAccount() && this.activeGrantId ? { grant_id: this.activeGrantId } : {}),\n });\n\n // Sometimes the Nylas identity session fetch method returns undefined.\n // Possibly due to CORS issues. In this case, we throw an error.\n if (typeof response === 'undefined') {\n throw new Error('Response is undefined');\n }\n\n return dataResponse(response as T);\n } catch (error: any) {\n let errorMessage = String(error);\n if (String(error).includes('Access token not found')) {\n errorMessage = 'Session expired, please log in again. Redirecting...';\n setTimeout(() => {\n localStorage.removeItem('grant');\n localStorage.removeItem('user');\n window.location.reload();\n }, 1000);\n }\n return dataResponse(null as T, {\n message: errorMessage,\n });\n }\n }\n\n /\n This method returns the current (logged in) user's information.\n * If the user is not logged in, it returns null.\n * @returns Promise<User \| null>\n /\n async currentUser(): Promise<User \| null> {\n const grantId = this.session.isMultiAccount() ? this.activeGrantId : undefined;\n const idToken = await this.session.getProfile(grantId);\n // If the user is not logged in, we can't get the grant (no access token)\n if (await this.session.isLoggedIn()) {\n const grantResponse = await this.session.fetch(`grants/me`, {\n method: 'GET',\n ...(this.session.isMultiAccount() && this.activeGrantId ? { grant_id: this.activeGrantId } : {}),\n });\n const grant = grantResponse.data;\n\n if (!idToken \|\| !grant) {\n return null;\n }\n\n const grantEmail = grant.email;\n return {\n id: idToken.sub,\n email: grantEmail,\n name: idToken.name,\n provider: idToken.provider,\n };\n }\n\n return null;\n }\n\n /\n This method returns the URL to redirect the user to for authentication.\n * @param authConfig authArgs\n * @returns Promise<string \| undefined>\n /\n async authenticationUrl(authArgs?: AuthArgs): Promise<string \| undefined> {\n const provider = authArgs?.provider \|\| 'google';\n const defaultArgs = this.defaultAuthArgs.find(args => args.provider === provider);\n let args = defaultArgs \|\| {};\n\n if (authArgs) {\n args = { ...args, ...authArgs };\n }\n return this.session.auth(args);\n }\n\n /\n This method sets the default authentication arguments to use when authenticating the user.\n * @param authArgs authArgs\n */\n setDefaultAuthArgs(authArgs: AuthArgs[]) {\n this.defaultAuthArgs = authArgs;\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"nylas-api-request-rYAjhY1J.js","sources":["src/common/nylas-api-request.ts"],"sourcesContent":["import { dataResponse } from '@/utils/utils';\nimport type { NylasSessions } from '@nylas/identity';\nimport { DataResponseReturnType } from './types';\n\n/*\n Arguments for making a request to the Nylas API.\n /\nexport type NylasRequestArgs = {\n method: 'GET' \| 'POST' \| 'PUT' \| 'DELETE' \| 'PATCH';\n path: string;\n body?: any;\n headers?: Record<string, string>;\n};\n\n/\n A model representing a user in the Nylas Identity system.\n /\nexport type User = {\n id: string;\n email: string;\n name?: string;\n provider?: string;\n};\n\n/\n Arguments for authenticating a user with the Nylas Identity system.\n /\nexport type AuthArgs = {\n /\n The provider of the user's email address.\n /\n provider?: string;\n /\n A list of permission scopes for the provider.\n /\n scope?: Array<string>;\n /\n The login hint associated with the user.\n /\n loginHint?: string;\n /\n Whether to include grant scopes in the auth exchange.\n /\n includeGrantScopes?: boolean;\n prompt?: string;\n metadata?: string;\n state?: string;\n};\n\n/\n Interface for making requests to the Nylas API.\n \n This is an abstract class that is meant to be implemented by customers to provide their own\n * implementation of making requests to the Nylas API. This allows customers to use their own\n * authentication mechanism, or to use a different HTTP client library.\n /\nexport abstract class NylasApiRequest {\n /\n This method should make an authenticated request to the Nylas API.\n * Note: It should not throw an error if the request fails, but should return an object with the error\n * information as part of the tuple returned.\n * @param args NylasRequestArgs\n /\n abstract request<T = any>(args: NylasRequestArgs): Promise<DataResponseReturnType<T>>;\n\n /\n This method should return the current user's information.\n /\n\n abstract currentUser(): Promise<User \| null>;\n\n /\n This method should set the default authentication arguments to use when authenticating the user.\n /\n abstract setDefaultAuthArgs(authArgs: AuthArgs[]): void;\n\n /\n This method should return the URL to redirect the user to for authentication.\n /\n abstract authenticationUrl(authArgs?: AuthArgs): Promise<string \| undefined>;\n}\n\n/\n A wrapper around the Nylas Identity session that implements the NylasApiRequest interface.\n * This class is used by the Nylas Web Elements to make requests to the Nylas API if no custom\n * implementation of NylasApiRequest is provided.\n /\nexport class NylasIdentityRequestWrapper implements NylasApiRequest {\n /\n The Nylas Identity session instance.\n /\n private session: NylasSessions;\n\n /\n The grant_id to use for requests, if there is multi-account support\n * enabled in the Nylas Identity settings.\n /\n private activeGrantId?: string;\n\n /\n The default authentication arguments to use when authenticating the user.\n /\n private defaultAuthArgs: AuthArgs[] = [];\n\n /\n Constructor for the NylasIdentityRequestWrapper class.\n * @param session The Nylas Identity session instance.\n /\n constructor(session: NylasSessions) {\n this.session = session;\n }\n\n /\n This method sets the grant_id to use for requests.\n * This is used when there is multi-account support enabled in the Nylas Identity settings.\n \n @param grantId\n /\n setActiveGrantId(grantId: string) {\n this.activeGrantId = grantId;\n }\n\n /\n This method makes a request to the Nylas API, using the Nylas Identity's fetch method.\n \n The `grants/me/` prefix is added because all requests made from the browser to the Nylas API\n * must be made on behalf of the currently logged in user with a valid access token.\n \n @param NylasRequestArgs\n * @returns Promise<[T \| null, NylasErrorResponse['error'] \| null]>\n /\n async request<T>({ method, path, body, headers }: NylasRequestArgs): Promise<DataResponseReturnType<T>> {\n try {\n const response = await this.session.fetch(`grants/me/${path}`, {\n method,\n headers: headers ? new Headers(headers) : undefined,\n body,\n ...(this.session.isMultiAccount() && this.activeGrantId ? { grant_id: this.activeGrantId } : {}),\n });\n\n // Sometimes the Nylas identity session fetch method returns undefined.\n // Possibly due to CORS issues. In this case, we throw an error.\n if (typeof response === 'undefined') {\n throw new Error('Response is undefined');\n }\n\n return dataResponse(response as T);\n } catch (error: any) {\n let errorMessage = String(error);\n if (String(error).includes('Access token not found')) {\n errorMessage = 'Session expired, please log in again. Redirecting...';\n setTimeout(() => {\n localStorage.removeItem('grant');\n localStorage.removeItem('user');\n window.location.reload();\n }, 1000);\n }\n return dataResponse(null as T, {\n message: errorMessage,\n });\n }\n }\n\n /\n This method returns the current (logged in) user's information.\n * If the user is not logged in, it returns null.\n * @returns Promise<User \| null>\n /\n async currentUser(): Promise<User \| null> {\n const grantId = this.session.isMultiAccount() ? this.activeGrantId : undefined;\n const idToken = await this.session.getProfile(grantId);\n // If the user is not logged in, we can't get the grant (no access token)\n if (await this.session.isLoggedIn()) {\n const grantResponse = await this.session.fetch(`grants/me`, {\n method: 'GET',\n ...(this.session.isMultiAccount() && this.activeGrantId ? { grant_id: this.activeGrantId } : {}),\n });\n const grant = grantResponse.data;\n\n if (!idToken \|\| !grant) {\n return null;\n }\n\n const grantEmail = grant.email;\n return {\n id: idToken.sub,\n email: grantEmail,\n name: idToken.name,\n provider: idToken.provider,\n };\n }\n\n return null;\n }\n\n /\n This method returns the URL to redirect the user to for authentication.\n * @param authConfig authArgs\n * @returns Promise<string \| undefined>\n /\n async authenticationUrl(authArgs?: AuthArgs): Promise<string \| undefined> {\n const provider = authArgs?.provider \|\| 'google';\n const defaultArgs = this.defaultAuthArgs.find(args => args.provider === provider);\n let args = defaultArgs \|\| {};\n\n if (authArgs) {\n args = { ...args, ...authArgs };\n }\n return this.session.auth(args);\n }\n\n /\n This method sets the default authentication arguments to use when authenticating the user.\n * @param authArgs authArgs\n */\n setDefaultAuthArgs(authArgs: AuthArgs[]) {\n this.defaultAuthArgs = authArgs;\n }\n}\n"],"names":[],"mappings":"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"}