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

package/dist/nylas-web-elements/p-62aeac5f.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as a,c as s}from"./p-68c2fadf.js";import{s as r}from"./p-cb9f8627.js";import"./p-cb65c223.js";import"./p-1ffbe196.js";import"./p-02aa5f03.js";const t="button.sc-button-component{display:flex;align-items:center;justify-content:center;gap:0.75rem;height:48px;border:none;border-radius:var(--nylas-border-radius-2x);font-size:1rem;line-height:24px;padding:0 1rem;cursor:pointer;font-family:var(--nylas-font-family);font-weight:600}@media screen and (max-width: 768px){button.sc-button-component{width:100%}}button.button-primary.sc-button-component{background:var(--nylas-primary);color:var(--nylas-base-0);height:48px;border:none;border-radius:var(--nylas-border-radius-2x);font-size:1rem;line-height:24px;padding:0 1rem;cursor:pointer}button.button-primary.sc-button-component:hover{background:var(--nylas-base-600)}button.button-primary.sc-button-component:active{background:var(--nylas-base-800)}button.button-primary.sc-button-component:disabled{background:var(--nylas-base-300);cursor:not-allowed}button.button-basic.sc-button-component{border:1px solid var(--nylas-base-300);color:var(--nylas-base-700);background:transparent}button.button-basic.sc-button-component:hover{background:transparent;border-color:var(--nylas-primary)}button.button-basic.sc-button-component:active{background:transparent;border-color:var(--nylas-base-600);border-width:2px}button.button-basic.sc-button-component:disabled{background:transparent;border-color:var(--nylas-base-300);color:var(--nylas-base-300);cursor:not-allowed}button.button-destructive.sc-button-component{border:1px solid var(--nylas-base-300);color:var(--nylas-error);background:transparent}button.button-destructive.sc-button-component:hover{background:transparent;border-color:var(--nylas-error)}button.button-destructive.sc-button-component:active{background:transparent;border-color:var(--nylas-error-pressed);border-width:2px;color:var(--nylas-error-pressed)}button.button-destructive.sc-button-component:disabled{background:transparent;border-color:var(--nylas-base-300);color:var(--nylas-base-300);cursor:not-allowed}button.button-invisible.sc-button-component{background:transparent;color:var(--nylas-base-800);border:none}button.button-invisible.sc-button-component:hover{background:var(--nylas-base-50);color:var(--nylas-primary)}button.button-invisible.sc-button-component:active{background:var(--nylas-base-50);color:var(--nylas-base-850)}button.button-invisible.sc-button-component:disabled{background:transparent;color:var(--nylas-base-300);cursor:not-allowed}";const n=t;const o=class{constructor(a){e(this,a);this.variant="primary";this.disabled=false;this.type="button";this.clickHandler=undefined;this.mouseOverHandler=undefined;this.mouseOutHandler=undefined;this.focusHandler=undefined;this.blurHandler=undefined}render(){const e=`button-${this.variant}`+(this.disabled?" disabled":"");return a("button",{key:"77fcafa20043b9f599b1fa1239bf683969b05eaf",class:e,disabled:this.disabled,type:"type",onClick:this.clickHandler,onMouseOver:this.mouseOverHandler,onMouseOut:this.mouseOutHandler,onFocus:this.focusHandler,onBlur:this.blurHandler},a("slot",{key:"d061264ee544bb9f4ca7ec3aa03f54b84c8af1fd"}))}};o.style=n;const i='.checkbox-container{--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:"Inter", sans-serif;display:flex;flex-direction:column;gap:0.5rem}.checkbox-container p.error{color:var(--nylas-error);font-size:14px;font-weight:400;line-height:20px;font-family:var(--nylas-font-family);margin:0}label{display:flex;align-items:center;font-family:var(--nylas-font-family);cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}label input[type=checkbox]{position:absolute;opacity:0;cursor:pointer}label input[type=checkbox]:focus~.checkmark,label input[type=checkbox]:hover~.checkmark{border-color:var(--nylas-primary)}label input[type=checkbox]:checked~.checkmark{color:var(--nylas-base-0);background:var(--nylas-primary) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border:2px solid var(--nylas-primary)}label .checkmark{border-radius:var(--nylas-border-radius);border:2px solid var(--nylas-base-800);position:absolute;left:0;top:2px;width:18px;height:18px;cursor:pointer;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}label .label{margin-left:32px;font-size:16px;font-weight:400;color:var(--nylas-base-800);line-height:24px}';const l=i;const c=class{constructor(a){e(this,a);this.nylasFormCheckboxToggled=s(this,"nylasFormCheckboxToggled",7);this.name="checkbox";this.checked=false;this.label="";this.required=false;this.isChecked=this.checked;this.error=""}componentWillLoad(){this.isChecked=this.checked}handleBookingFormSubmitted(e){if(this.required&&!this.isChecked){this.error=`${this.label} is required.`;return}if(this.error){e.preventDefault()}}toggleCheck(){this.error="";this.isChecked=!this.isChecked;this.nylasFormCheckboxToggled.emit({checked:this.isChecked,name:this.name,label:this.label})}render(){return a("div",{key:"2aa7451177c31e4dc5b6050b48c675eb44d0bb48",class:"checkbox-container"},a("label",{key:"1bdcdf2c37eabf25091a38e3a2f97ea1bc75c41d"},a("input",{key:"e7538bf21e8171cb0696e6bddba8d2496ad6e653",type:"checkbox",name:this.name,checked:this.isChecked,onChange:()=>this.toggleCheck()}),a("span",{key:"298c9fcb3e0b8d3446c69f5dd8fd5efef73bf5dd",class:"checkmark"}),a("slot",{key:"d29afdf0831fc9be332060623eb99b2c51ea8be7",name:"label"},a("span",{key:"d9ecaa3ecba17d006c2830938cf0f343fded43a9",class:"label"},this.label))),this.error&&a("p",{class:"error"},this.error))}};c.style=l;const b=':host{display:block;height:auto;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:"Inter", sans-serif;width:100%}label{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%;flex-direction:column;gap:4px;font-family:var(--nylas-font-family);font-size:16px;color:var(--nylas-base-800)}label.error{color:var(--nylas-error)}label span.required{color:var(--nylas-error);padding:0 0.25rem}label p{margin:0}label .error{color:var(--nylas-error)}.input_wrapper{display:flex;align-items:center;gap:1rem}input[type=text],input[type=email]{display:flex;height:48px;padding-left:16px;align-items:center;gap:8px;align-self:stretch;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-300);background:var(--nylas-base-0);width:-webkit-fill-available;color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:400;line-height:150%;width:-moz-available;width:-webkit-fill-available}input[type=text]:focus,input[type=email]:focus{outline-color:var(--nylas-primary)}input[type=text].error,input[type=email].error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}input[type=text].error::placeholder,input[type=email].error::placeholder{font-weight:400}input[type=text]::placeholder,input[type=email]::placeholder{color:var(--nylas-base-300)}';const d=b;const p={email:/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/,phone_number:/^[0-9]{10}$/};const h={email:"name@example.com",phone_number:"1234567890"};const u=class{constructor(a){e(this,a);this.nylasFormInputChanged=s(this,"nylasFormInputChanged",7);this.name="input";this.defaultValue="";this.label="";this.type="text";this.placeholder=h[this.type];this.required=false;this.readOnly=false;this.autoFocus=false;this.pattern=undefined;this.maxLength=255;this.patternError="";this.value="";this.error=""}handleDefaultValueChange(e){this.value=r(e);if(this.value){this.validatePattern(this.value)}}componentWillLoad(){this.value=r(this.defaultValue);if(this.type!=="text"&&!this.pattern){this.pattern=p[this.type]}if(this.value){this.validatePattern(this.value)}}handleBookingFormSubmitted(e){this.validatePattern(this.value);if(this.error){e.preventDefault()}}handleInput(e){this.error="";this.value=r(e.target.value);this.nylasFormInputChanged.emit({value:this.value,name:this.name,label:this.label,error:this.error,type:this.type})}validatePattern(e){this.error="";if(this.required&&!e){this.error=`${this.label} is required.`;return}if(!this.pattern||!e&&!this.required)return;if(this.pattern.test(e)){this.error=""}else{this.error=`Invalid ${this.label.toLowerCase()} format.`}}render(){return a("label",{key:"4a6deab471a6af7ced7959e9a051a717110a8a19",part:"ic__label",class:{error:!!this.error}},a("p",{key:"9158a61ad4b9ea2521a39e45521372681fcb3423"},a("span",{key:"ed6247893d8c4fc903a26febf2341931c090053e",class:"label"},this.label),this.required&&a("span",{class:"required"},"*")),a("div",{key:"3141c23d3136dfc069d1b1664dd6947a194da6c0",part:"ic__input_wrapper",class:"input_wrapper"},a("input",{key:"52498c13b0632d632317951ad25d281025e58f91",type:"text",name:this.name,part:"ic__input",readOnly:this.readOnly,autoFocus:this.autoFocus,value:this.value,maxLength:this.maxLength,placeholder:this.placeholder,class:{error:!!this.error},onInput:e=>this.handleInput(e)}),a("slot",{key:"e4471ec1b410ac547cb047bcd11ea470b8fae8f2",name:"additional-input"})),this.error&&a("span",{class:"error help-text"},this.error," ",this.value&&this.patternError!==""?` ${this.patternError}`:""))}static get watchers(){return{defaultValue:["handleDefaultValueChange"]}}};u.style=d;const y='.radio-group{display:flex;flex-direction:column;gap:0.5rem;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:"Inter", sans-serif}.radio-group slot[name=label]{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%;font-size:16px}.radio-group slot[name=label].error{color:var(--nylas-error)}.radio-group slot[name=label] span.required{color:var(--nylas-error);padding:0 0.25rem}.radio-group slot[name=label] p{margin:0}.radio-group slot[name=label] p.error{color:var(--nylas-error)}.radio-group slot[name=label] .error{color:var(--nylas-error)}.radio-group span.error{color:var(--nylas-error);font-size:14px;font-weight:400;line-height:20px;font-family:var(--nylas-font-family)}.radio-group label{display:flex;font-family:var(--nylas-font-family);cursor:pointer}.radio-group label .radio-option{display:flex;align-items:flex-start;gap:0.5rem}.radio-group label .radio-option input[type=radio]{cursor:pointer}.radio-group label .radio-option input[type=radio i]{width:20px;height:20px;color:var(--nylas-primary)}.radio-group label .radio-option p{display:flex;flex-direction:column;gap:0.5rem;margin:0}.radio-group label .radio-option p .title{font-size:16px;font-weight:500;line-height:20px;color:var(--nylas-base-800)}.radio-group label .radio-option p .description{font-size:14px;font-weight:400;line-height:20px;color:var(--nylas-base-600)}';const f=y;const m=class{constructor(a){e(this,a);this.nylasFormRadioChanged=s(this,"nylasFormRadioChanged",7);this.name="radio-group";this.options=[];this.defaultSelectedValue="";this.label=undefined;this.required=false;this.selectedValue=this.defaultSelectedValue;this.error=""}handleBookingFormSubmitted(e){if(this.required&&!this.selectedValue){this.error=`${this.label} is required.`;return}if(this.error){e.preventDefault()}}handleChange(e){this.error="";this.selectedValue=e;this.nylasFormRadioChanged.emit({value:e,name:this.name,label:this.label})}render(){return a("div",{key:"11cf3c389f44bd4758e4b649e7714c4b43eac706",class:"radio-group"},a("slot",{key:"fc49aed7f9f72234f78146c3cb32cafba1f5f8ea",name:"label"},this.label&&a("p",{class:{error:!!this.error}},a("span",{class:"label"},this.label),this.required&&a("span",{class:"required"},"*"))),this.options.map((e=>a("label",null,a("div",{class:"radio-option"},a("input",{type:"radio",name:this.name,value:e.value,checked:this.selectedValue===e.value,onChange:()=>this.handleChange(e.value)}),a("p",null,a("span",{class:"title"},e.label),a("span",{class:"description"},e.description)))))),this.error&&a("span",{class:"error help-text"},this.error))}};m.style=f;export{o as button_component,c as checkbox_component,u as input_component,m as radio_button_group};
+//# sourceMappingURL=p-62aeac5f.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["buttonComponentCss","ButtonComponentStyle0","ButtonComponent","render","className","this","variant","disabled","h","key","class","type","onClick","clickHandler","onMouseOver","mouseOverHandler","onMouseOut","mouseOutHandler","onFocus","focusHandler","onBlur","blurHandler","checkboxComponentCss","CheckboxComponentStyle0","CheckboxComponent","checked","componentWillLoad","isChecked","handleBookingFormSubmitted","event","required","error","label","preventDefault","toggleCheck","nylasFormCheckboxToggled","emit","name","onChange","inputComponentCss","InputComponentStyle0","DefaultPattern","email","phone_number","DefaultPlaceholder","InputComponent","handleDefaultValueChange","newValue","value","sanitizeHtml","validatePattern","defaultValue","pattern","handleInput","e","target","nylasFormInputChanged","test","toLowerCase","part","readOnly","autoFocus","maxLength","placeholder","onInput","patternError","radioButtonGroupCss","RadioButtonGroupStyle0","RadioButtonGroup","defaultSelectedValue","selectedValue","handleChange","nylasFormRadioChanged","options","map","option","description"],"sources":["src/components/design-system/button-component/button-component.scss?tag=button-component&encapsulation=scoped","src/components/design-system/button-component/button-component.tsx","src/components/design-system/checkbox-component/checkbox-component.scss?tag=checkbox-component&encapsulation=shadow","src/components/design-system/checkbox-component/checkbox-component.tsx","src/components/design-system/input-component/input-component.scss?tag=input-component&encapsulation=shadow","src/components/design-system/input-component/input-component.tsx","src/components/design-system/radio-button-group/radio-button-group.scss?tag=radio-button-group&encapsulation=shadow","src/components/design-system/radio-button-group/radio-button-group.tsx"],"sourcesContent":["@import '../../../common/mixins/buttons.scss';\n@import '../../../common/styles/variables.scss';\n\nbutton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.75rem;\n  height: 48px;\n  border: none;\n  border-radius: var(--nylas-border-radius-2x);\n  font-size: 1rem;\n  line-height: 24px;\n  padding: 0 1rem;\n  cursor: pointer;\n  font-family: var(--nylas-font-family);\n  font-weight: 600;\n\n  @media #{$mobile} {\n    width: 100%;\n  }\n\n  &.button-primary {\n    @include primary-button;\n  }\n\n  &.button-basic {\n    border: 1px solid var(--nylas-base-300);\n    color: var(--nylas-base-700);\n    background: transparent;\n\n    &:hover {\n      background: transparent;\n      border-color: var(--nylas-primary);\n    }\n\n    &:active {\n      background: transparent;\n      border-color: var(--nylas-base-600);\n      border-width: 2px;\n    }\n\n    &:disabled {\n      background: transparent;\n      border-color: var(--nylas-base-300);\n      color: var(--nylas-base-300);\n      cursor: not-allowed;\n    }\n  }\n\n  &.button-destructive {\n    border: 1px solid var(--nylas-base-300);\n    color: var(--nylas-error);\n    background: transparent;\n\n    &:hover {\n      background: transparent;\n      border-color: var(--nylas-error);\n    }\n\n    &:active {\n      background: transparent;\n      border-color: var(--nylas-error-pressed);\n      border-width: 2px;\n      color: var(--nylas-error-pressed);\n    }\n\n    &:disabled {\n      background: transparent;\n      border-color: var(--nylas-base-300);\n      color: var(--nylas-base-300);\n      cursor: not-allowed;\n    }\n  }\n\n  &.button-invisible {\n    background: transparent;\n    color: var(--nylas-base-800);\n    border: none;\n\n    &:hover {\n      background: var(--nylas-base-50);\n      color: var(--nylas-primary);\n    }\n\n    &:active {\n      background: var(--nylas-base-50);\n      color: var(--nylas-base-850);\n    }\n\n    &:disabled {\n      background: transparent;\n      color: var(--nylas-base-300);\n      cursor: not-allowed;\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\ntype ButtonType = 'primary' | 'basic' | 'destructive' | 'invisible';\n\n@Component({\n  tag: 'button-component',\n  styleUrl: 'button-component.scss',\n  scoped: true,\n})\nexport class ButtonComponent {\n  // Define a prop to accept the button type\n  @Prop() variant: ButtonType = 'primary';\n\n  // Define a prop for disabled state\n  @Prop() disabled: boolean = false;\n\n  @Prop() type: string = 'button';\n  @Prop() clickHandler?: (event: MouseEvent) => void;\n  @Prop() mouseOverHandler?: (event: MouseEvent) => void;\n  @Prop() mouseOutHandler?: (event: MouseEvent) => void;\n  @Prop() focusHandler?: (event: FocusEvent) => void;\n  @Prop() blurHandler?: (event: FocusEvent) => void;\n\n  render() {\n    const className = `button-${this.variant}` + (this.disabled ? ' disabled' : '');\n\n    return (\n      <button\n        class={className}\n        disabled={this.disabled}\n        type=\"type\"\n        onClick={this.clickHandler}\n        onMouseOver={this.mouseOverHandler}\n        onMouseOut={this.mouseOutHandler}\n        onFocus={this.focusHandler}\n        onBlur={this.blurHandler}\n      >\n        <slot></slot>\n      </button>\n    );\n  }\n}\n","@import '../../../common/styles/variables.scss';\n\n.checkbox-container {\n  @include default-css-variables;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n\n  p.error {\n    color: var(--nylas-error);\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n    font-family: var(--nylas-font-family);\n    margin: 0;\n  }\n}\n\nlabel {\n  display: flex;\n  align-items: center;\n  font-family: var(--nylas-font-family);\n  cursor: pointer;\n  position: relative;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n\n  input[type='checkbox'] {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n\n    &:focus ~ .checkmark,\n    &:hover ~ .checkmark {\n      border-color: var(--nylas-primary);\n    }\n\n    &:checked ~ .checkmark {\n      color: var(--nylas-base-0);\n      background: var(--nylas-primary)\n        url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+)\n        50% 40% no-repeat;\n      border: 2px solid var(--nylas-primary);\n    }\n  }\n\n  .checkmark {\n    border-radius: var(--nylas-border-radius);\n    border: 2px solid var(--nylas-base-800);\n    position: absolute;\n    left: 0;\n    top: 2px;\n    width: 18px;\n    height: 18px;\n    cursor: pointer;\n    pointer-events: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n\n  .label {\n    margin-left: 32px;\n    font-size: 16px;\n    font-weight: 400;\n    color: var(--nylas-base-800);\n    line-height: 24px;\n  }\n}\n","import { Component, h, Prop, State, Event, EventEmitter, Listen } from '@stencil/core';\n\n/**\n * The `checkbox-component` component is a UI component that allows users to select a checkbox.\n * This component is used in the scheduling form to input checkbox type inputs.\n */\n@Component({\n  tag: 'checkbox-component',\n  styleUrl: 'checkbox-component.scss',\n  shadow: true,\n})\nexport class CheckboxComponent {\n  /**\n   * The name of the checkbox. This is used to identify the checkbox when submitting a form.\n   */\n  @Prop() name: string = 'checkbox';\n  /**\n   * The default value of the checkbox. This is the value that is displayed when the checkbox is rendered.\n   */\n  @Prop() checked: boolean = false;\n  /**\n   * The label of the checkbox. This is displayed next to the checkbox.\n   */\n  @Prop() label: string = '';\n  /**\n   * Whether the checkbox is required. If true, the checkbox must be checked when submitting a form.\n   * Default is false. If the checkbox is required and not checked, an error message is displayed.\n   */\n  @Prop() required: boolean = false;\n  /**\n   * The checked state of the checkbox.\n   */\n  @State() isChecked: boolean = this.checked;\n  /**\n   * The error message state.\n   */\n  @State() error: string = '';\n\n  /**\n   * This event is fired when the checkbox is toggled.\n   */\n  @Event() nylasFormCheckboxToggled!: EventEmitter<{\n    checked: boolean;\n    name: string;\n    label: string;\n  }>;\n\n  // Lifecycle events\n  componentWillLoad() {\n    this.isChecked = this.checked;\n  }\n\n  // Event listeners\n  /**\n   * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n   */\n  @Listen('bookingFormSubmitted', { target: 'document' })\n  handleBookingFormSubmitted(event: CustomEvent) {\n    if (this.required && !this.isChecked) {\n      this.error = `${this.label} is required.`;\n      return;\n    }\n    if (this.error) {\n      event.preventDefault();\n    }\n  }\n\n  // Methods\n  toggleCheck() {\n    this.error = '';\n    this.isChecked = !this.isChecked;\n    this.nylasFormCheckboxToggled.emit({\n      checked: this.isChecked,\n      name: this.name,\n      label: this.label,\n    });\n  }\n\n  render() {\n    return (\n      <div class=\"checkbox-container\">\n        <label>\n          <input type=\"checkbox\" name={this.name} checked={this.isChecked} onChange={() => this.toggleCheck()} />\n          <span class=\"checkmark\"></span>\n          <slot name=\"label\">\n            <span class=\"label\">{this.label}</span>\n          </slot>\n        </label>\n        {this.error && <p class=\"error\">{this.error}</p>}\n      </div>\n    );\n  }\n}\n","@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/inputs.scss';\n\n:host {\n  display: block;\n  height: auto;\n  @include default-css-variables;\n  width: 100%;\n}\n\nlabel {\n  @include input-label;\n  flex-direction: column;\n  gap: 4px;\n  font-family: var(--nylas-font-family);\n  font-size: 16px;\n  color: var(--nylas-base-800);\n\n  p {\n    margin: 0;\n  }\n\n  .error {\n    color: var(--nylas-error);\n  }\n}\n\n.input_wrapper {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\ninput[type='text'],\ninput[type='email'] {\n  @include textfield;\n  width: -moz-available;\n  width: -webkit-fill-available;\n}\n","import { Component, h, Prop, State, Event, EventEmitter, Listen, Watch } from '@stencil/core';\nimport sanitizeHtml from 'sanitize-html';\n\nconst DefaultPattern = {\n  email: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$/,\n  phone_number: /^[0-9]{10}$/,\n};\n\nconst DefaultPlaceholder = {\n  email: 'name@example.com',\n  phone_number: '1234567890',\n};\n\n/**\n * The `input-component` component is a UI component that allows users to input text, email, or phone number values.\n * This component is used in the scheduling form to input text, email and phone number type inputs.\n */\n\n@Component({\n  tag: 'input-component',\n  styleUrl: 'input-component.scss',\n  shadow: true,\n})\nexport class InputComponent {\n  /**\n   * The name of the input. This is used to identify the input when submitting a form.\n   */\n  @Prop() name: string = 'input';\n  /**\n   * The default value of the input. This is the value that is displayed when the input is rendered.\n   */\n  @Prop() defaultValue: string = '';\n  /**\n   * The label of the input. This is displayed above the input.\n   */\n  @Prop() label: string = '';\n  /**\n   * The type of the input. This is used to determine the input's behavior.\n   * Supported types are 'text', 'email', and 'phone_number'.\n   */\n  @Prop() type: 'text' | 'email' | 'phone_number' = 'text';\n  /**\n   * The placeholder of the input. This is displayed when the input is empty.\n   */\n  @Prop() placeholder: string = DefaultPlaceholder[this.type];\n  /**\n   * Whether the input is required. If true, the input must have a value when submitting a form.\n   * Default is false. If the input is required and the value is empty, an error message is displayed.\n   */\n  @Prop() required: boolean = false;\n  /**\n   * Whether the input is read-only. If true, the input cannot be edited.\n   * Default is false.\n   */\n  @Prop() readOnly: boolean = false;\n  /**\n   * Whether the input should be focused when rendered.\n   * Default is false. If true, the input is focused when rendered.\n   * Use this to set the focus on the first input in a form.\n   */\n  @Prop() autoFocus: boolean = false;\n  /**\n   * The pattern to validate the input value. If the value does not match the pattern, an error message is displayed.\n   * Default is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'phone_number'.\n   */\n  @Prop() pattern?: RegExp;\n  /**\n   * The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed.\n   * Default is 255.\n   */\n  @Prop() maxLength: number = 255;\n  /**\n   * The error message to display when the value does not match the pattern.\n   * Default is an empty string. If the value does not match the pattern, the error message is appended to the default error message.\n   * For ex: patternError: \"Format: 123-456-7890\" , Default error message: \"Invalid phone number.\"\n   * - Error message displayed: \"Invalid phone number. Format: 123-456-7890\"\n   */\n  @Prop() patternError: string = '';\n\n  /**\n   * The input value state.\n   */\n  @State() value: string = '';\n  /**\n   * The error message state.\n   */\n  @State() error: string = '';\n\n  /**\n   * This event is fired when the input value is changed.\n   * The scheduling form listens for this event to validate the input value and submit the form.\n   * If using outside of the scheduling form, listen for this event to validate the input value\n   * and handle the input value change.\n   */\n  @Event() nylasFormInputChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    label: string;\n    type: string;\n    error: string;\n  }>;\n\n  // Lifecycle methods\n  @Watch('defaultValue')\n  handleDefaultValueChange(newValue: string) {\n    this.value = sanitizeHtml(newValue);\n    if (this.value) {\n      this.validatePattern(this.value);\n    }\n  }\n\n  componentWillLoad() {\n    this.value = sanitizeHtml(this.defaultValue);\n    if (this.type !== 'text' && !this.pattern) {\n      this.pattern = DefaultPattern[this.type];\n    }\n\n    if (this.value) {\n      this.validatePattern(this.value);\n    }\n  }\n\n  // Event listeners\n  /**\n   * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n   */\n  @Listen('bookingFormSubmitted', { target: 'document' })\n  handleBookingFormSubmitted(event: CustomEvent) {\n    this.validatePattern(this.value);\n    if (this.error) {\n      event.preventDefault();\n    }\n  }\n\n  // Methods\n  handleInput(e: Event) {\n    this.error = '';\n    this.value = sanitizeHtml((e.target as HTMLInputElement).value);\n    this.nylasFormInputChanged.emit({\n      value: this.value,\n      name: this.name,\n      label: this.label,\n      error: this.error,\n      type: this.type,\n    });\n  }\n\n  validatePattern(value: string) {\n    // Reset error\n    this.error = '';\n    // Check if the field is required and value is empty\n    if (this.required && !value) {\n      this.error = `${this.label} is required.`;\n      return;\n    }\n    // Check if value matches pattern\n    if (!this.pattern || (!value && !this.required)) return;\n\n    if (this.pattern.test(value)) {\n      this.error = '';\n    } else {\n      this.error = `Invalid ${this.label.toLowerCase()} format.`;\n    }\n  }\n\n  render() {\n    return (\n      <label part=\"ic__label\" class={{ error: !!this.error }}>\n        <p>\n          <span class=\"label\">{this.label}</span>\n          {this.required && <span class=\"required\">*</span>}\n        </p>\n        <div part=\"ic__input_wrapper\" class=\"input_wrapper\">\n          <input\n            type=\"text\"\n            name={this.name}\n            part=\"ic__input\"\n            readOnly={this.readOnly}\n            autoFocus={this.autoFocus}\n            value={this.value}\n            maxLength={this.maxLength}\n            placeholder={this.placeholder}\n            class={{ error: !!this.error }}\n            onInput={e => this.handleInput(e)}\n          />\n          <slot name=\"additional-input\"></slot>\n        </div>\n        {this.error && (\n          <span class=\"error help-text\">\n            {this.error} {this.value && this.patternError !== '' ? ` ${this.patternError}` : ''}\n          </span>\n        )}\n      </label>\n    );\n  }\n}\n","@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/inputs.scss';\n\n.radio-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  @include default-css-variables;\n\n  slot[name='label'] {\n    @include input-label;\n    font-size: 16px;\n\n    p {\n      margin: 0;\n\n      &.error {\n        color: var(--nylas-error);\n      }\n    }\n\n    .error {\n      color: var(--nylas-error);\n    }\n  }\n\n  span.error {\n    color: var(--nylas-error);\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n    font-family: var(--nylas-font-family);\n  }\n\n  label {\n    display: flex;\n\n    font-family: var(--nylas-font-family);\n    cursor: pointer;\n\n    .radio-option {\n      display: flex;\n      align-items: flex-start;\n      gap: 0.5rem;\n\n      input[type='radio'] {\n        cursor: pointer;\n      }\n\n      input[type='radio' i] {\n        width: 20px;\n        height: 20px;\n        color: var(--nylas-primary);\n      }\n\n      p {\n        display: flex;\n        flex-direction: column;\n        gap: 0.5rem;\n        margin: 0;\n\n        .title {\n          font-size: 16px;\n          font-weight: 500;\n          line-height: 20px;\n          color: var(--nylas-base-800);\n        }\n\n        .description {\n          font-size: 14px;\n          font-weight: 400;\n          line-height: 20px;\n          color: var(--nylas-base-600);\n        }\n      }\n    }\n  }\n}\n","// src/components/radio-group/radio-group.tsx\nimport { Component, h, Prop, State, Event, EventEmitter, Listen } from '@stencil/core';\n\n/**\n * The `radio-button-group` component is a UI component that allows users to select a single option from a list of options.\n * This component is used in the scheduling form to input radio button type inputs.\n */\n@Component({\n  tag: 'radio-button-group',\n  styleUrl: 'radio-button-group.scss',\n  shadow: true,\n})\nexport class RadioButtonGroup {\n  /**\n   * The name of the radio group. This is used to identify the radio group when submitting a form.\n   */\n  @Prop() name: string = 'radio-group';\n  /**\n   * The list of options in the radio group.\n   * Each option has a label and a value and an optional description.\n   */\n  @Prop() options: { label: string; value: string; description?: string }[] = [];\n  /**\n   * The default selected value of the radio group.\n   */\n  @Prop() defaultSelectedValue: string = '';\n  /**\n   * The label of the radio group. This is displayed above the radio group.\n   * Label is optional. You can also use the slot 'label' to add a label.\n   */\n  @Prop() label?: string;\n  /**\n   * Whether the radio group is required. If true, the radio group must have a value when submitting a form.\n   * Default is false. If the radio group is required and the value is empty, an error message is displayed.\n   */\n  @Prop() required: boolean = false;\n  /**\n   * The selected value of the radio group.\n   */\n  @State() selectedValue: string = this.defaultSelectedValue;\n  /**\n   * The error message state.\n   */\n  @State() error: string = '';\n  /**\n   * This event is fired when the selected value changes.\n   */\n  @Event() nylasFormRadioChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    label?: string;\n  }>;\n\n  // Event listeners\n  /**\n   * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n   */\n  @Listen('bookingFormSubmitted', { target: 'document' })\n  handleBookingFormSubmitted(event: CustomEvent) {\n    if (this.required && !this.selectedValue) {\n      this.error = `${this.label} is required.`;\n      return;\n    }\n    if (this.error) {\n      event.preventDefault();\n    }\n  }\n\n  handleChange(value: string) {\n    this.error = '';\n    this.selectedValue = value;\n    this.nylasFormRadioChanged.emit({\n      value,\n      name: this.name,\n      label: this.label,\n    });\n  }\n\n  render() {\n    return (\n      <div class=\"radio-group\">\n        <slot name=\"label\">\n          {this.label && (\n            <p class={{ error: !!this.error }}>\n              <span class=\"label\">{this.label}</span>\n              {this.required && <span class=\"required\">*</span>}\n            </p>\n          )}\n        </slot>\n        {this.options.map(option => (\n          <label>\n            <div class=\"radio-option\">\n              <input type=\"radio\" name={this.name} value={option.value} checked={this.selectedValue === option.value} onChange={() => this.handleChange(option.value)} />\n              <p>\n                <span class=\"title\">{option.label}</span>\n                <span class=\"description\">{option.description}</span>\n              </p>\n            </div>\n          </label>\n        ))}\n        {this.error && <span class=\"error help-text\">{this.error}</span>}\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nylas-web-elements/p-64d43339.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as s}from"./p-68c2fadf.js";const e=".sc-copy-icon-h{display:flex}";const c=e;const C=class{constructor(s){t(this,s);this.width="16";this.height="16"}render(){return s("svg",{key:"e0d0f37ab9fca2f9fc6a5f56746e3f0435a2833b",width:this.width,height:this.height,fill:"none",xmlns:"http://www.w3.org/2000/svg"},s("path",{key:"88e4fcba05c0d5651ad14e27ddab7ffd00a89ea9",d:"M4 0.75C2.89543 0.75 2 1.64543 2 2.75V12.75C2 13.8546 2.89543 14.75 4 14.75H10C11.1046 14.75 12 13.8546 12 12.75V2.75C12 1.64543 11.1046 0.75 10 0.75H4ZM3 2.75C3 2.19772 3.44772 1.75 4 1.75H10C10.5523 1.75 11 2.19772 11 2.75V12.75C11 13.3023 10.5523 13.75 10 13.75H4C3.44772 13.75 3 13.3023 3 12.75V2.75ZM0 4.75001C0 4.00973 0.402199 3.36339 1 3.01758V13.25C1 14.6307 2.11929 15.75 3.5 15.75H9.73244C9.38663 16.3478 8.74028 16.75 8 16.75H3.5C1.567 16.75 0 15.183 0 13.25V4.75001Z",fill:"currentColor"}))}};C.style=c;const i=".sc-delete-icon-h{display:flex}";const o=i;const f=class{constructor(s){t(this,s);this.width="15";this.height="17"}render(){return s("svg",{key:"79ea66d005f803b4bca931cdbde94b6ac0bf0f38",width:this.width,height:this.height,fill:"none",xmlns:"http://www.w3.org/2000/svg"},s("path",{key:"ac489fcfebd596a9f9cae0b34795deb25a4f8f0d",d:"M9.5 2.75C9.5 1.92157 8.82843 1.25 8 1.25C7.17157 1.25 6.5 1.92157 6.5 2.75H5.5C5.5 1.36929 6.61929 0.25 8 0.25C9.38071 0.25 10.5 1.36929 10.5 2.75H15C15.2761 2.75 15.5 2.97386 15.5 3.25C15.5 3.52614 15.2761 3.75 15 3.75H14.446L13.1499 14.9792C13.0335 15.9884 12.179 16.75 11.1631 16.75H4.83688C3.821 16.75 2.9665 15.9884 2.85006 14.9792L1.553 3.75H1C0.75454 3.75 0.550392 3.57312 0.508056 3.33988L0.5 3.25C0.5 2.97386 0.723858 2.75 1 2.75H9.5ZM13.438 3.75H2.561L3.84347 14.8646C3.90169 15.3692 4.32894 15.75 4.83688 15.75H11.1631C11.6711 15.75 12.0983 15.3692 12.1565 14.8646L13.438 3.75ZM6.5 6.25C6.74546 6.25 6.94961 6.40477 6.99194 6.60886L7 6.6875V12.8125C7 13.0541 6.77614 13.25 6.5 13.25C6.25454 13.25 6.05039 13.0952 6.00806 12.8911L6 12.8125V6.6875C6 6.44588 6.22386 6.25 6.5 6.25ZM9.5 6.25C9.74546 6.25 9.94961 6.40477 9.99194 6.60886L10 6.6875V12.8125C10 13.0541 9.77614 13.25 9.5 13.25C9.25454 13.25 9.05039 13.0952 9.00806 12.8911L9 12.8125V6.6875C9 6.44588 9.22386 6.25 9.5 6.25Z",fill:"currentColor"}))}};f.style=o;const n=".sc-edit-icon-h{display:flex}";const d=n;const a=class{constructor(s){t(this,s);this.width="16";this.height="16"}render(){return s("svg",{key:"3b5ad4bb74e89993aed4fd87e32223fab1ffb354",width:this.width,height:this.height,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},s("path",{key:"5906cf7a147d84ef3427d12f962384b6d8bedd34",d:"M11.245 0.817394C12.3318 -0.269413 14.0938 -0.269413 15.1806 0.817394C16.2222 1.85892 16.2656 3.5206 15.3108 4.6138L15.1806 4.75307L5.57482 14.3589C5.36973 14.564 5.12299 14.7215 4.85212 14.8213L4.68684 14.8742L0.631867 15.9801C0.285278 16.0746 -0.0347856 15.7861 0.00276241 15.4455L0.0179263 15.3662L1.12383 11.3112C1.20014 11.0314 1.33621 10.7722 1.52188 10.5511L1.63914 10.4232L11.245 0.817394ZM10.3848 3.09229L2.34625 11.1303C2.25396 11.2226 2.18093 11.3318 2.13086 11.4514L2.08859 11.5743L1.21196 14.785L4.42372 13.9094C4.50767 13.8865 4.5879 13.8529 4.66253 13.8096L4.77003 13.7375L4.86771 13.6518L12.9058 5.61329L10.3848 3.09229ZM14.4735 1.5245C13.8159 0.8669 12.7725 0.830367 12.072 1.4149L11.9521 1.5245L11.0918 2.38529L13.6128 4.90629L14.4735 4.04596C15.1311 3.38836 15.1677 2.34488 14.5831 1.64441L14.4735 1.5245Z",fill:"currentColor"}))}};a.style=d;const h=".sc-eye-icon-h{display:flex}";const r=h;const l=class{constructor(s){t(this,s);this.width="16";this.height="16"}render(){return s("svg",{key:"fa41db2e28011dafd5cf54da71f2e52f5b672634",width:this.width,height:this.height,fill:"none",xmlns:"http://www.w3.org/2000/svg"},s("path",{key:"50c3a05fc6f34ab1f43b54a9e9b14fd3349bcc18",d:"M1.25909 7.35214C1.94254 4.07689 4.79437 1.75 8.00002 1.75C11.2057 1.75 14.0574 4.07688 14.7409 7.35215C14.7974 7.62246 15.0622 7.79587 15.3325 7.73946C15.6029 7.68304 15.7763 7.41817 15.7199 7.14785C14.9425 3.42312 11.6934 0.75 8.00002 0.75C4.3066 0.75 1.05742 3.42311 0.280175 7.14786C0.223767 7.41818 0.397177 7.68305 0.667497 7.73946C0.937817 7.79587 1.20268 7.62246 1.25909 7.35214ZM7.98953 3.75C9.92253 3.75 11.4895 5.317 11.4895 7.25C11.4895 9.18299 9.92253 10.75 7.98953 10.75C6.05653 10.75 4.48953 9.18299 4.48953 7.25C4.48953 5.317 6.05653 3.75 7.98953 3.75Z",fill:"currentColor"}))}};l.style=r;export{C as copy_icon,f as delete_icon,a as edit_icon,l as eye_icon};
+//# sourceMappingURL=p-64d43339.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["iconCss","CopyIconStyle0","CopyIcon","render","h","key","width","this","height","fill","xmlns","d","DeleteIconStyle0","DeleteIcon","EditIconStyle0","EditIcon","viewBox","EyeIconStyle0","EyeIcon"],"sources":["src/common/icons/icon.css?tag=copy-icon&encapsulation=scoped","src/common/icons/copy.tsx","src/common/icons/icon.css?tag=delete-icon&encapsulation=scoped","src/common/icons/delete.tsx","src/common/icons/icon.css?tag=edit-icon&encapsulation=scoped","src/common/icons/edit.tsx","src/common/icons/icon.css?tag=eye-icon&encapsulation=scoped","src/common/icons/eye.tsx"],"sourcesContent":[":host {\n  display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'copy-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class CopyIcon {\n  @Prop() width: string = '16';\n  @Prop() height: string = '16';\n\n  render() {\n    return (\n      <svg width={this.width} height={this.height} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M4 0.75C2.89543 0.75 2 1.64543 2 2.75V12.75C2 13.8546 2.89543 14.75 4 14.75H10C11.1046 14.75 12 13.8546 12 12.75V2.75C12 1.64543 11.1046 0.75 10 0.75H4ZM3 2.75C3 2.19772 3.44772 1.75 4 1.75H10C10.5523 1.75 11 2.19772 11 2.75V12.75C11 13.3023 10.5523 13.75 10 13.75H4C3.44772 13.75 3 13.3023 3 12.75V2.75ZM0 4.75001C0 4.00973 0.402199 3.36339 1 3.01758V13.25C1 14.6307 2.11929 15.75 3.5 15.75H9.73244C9.38663 16.3478 8.74028 16.75 8 16.75H3.5C1.567 16.75 0 15.183 0 13.25V4.75001Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    );\n  }\n}\n",":host {\n  display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'delete-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class DeleteIcon {\n  @Prop() width: string = '15';\n  @Prop() height: string = '17';\n\n  render() {\n    return (\n      <svg width={this.width} height={this.height} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M9.5 2.75C9.5 1.92157 8.82843 1.25 8 1.25C7.17157 1.25 6.5 1.92157 6.5 2.75H5.5C5.5 1.36929 6.61929 0.25 8 0.25C9.38071 0.25 10.5 1.36929 10.5 2.75H15C15.2761 2.75 15.5 2.97386 15.5 3.25C15.5 3.52614 15.2761 3.75 15 3.75H14.446L13.1499 14.9792C13.0335 15.9884 12.179 16.75 11.1631 16.75H4.83688C3.821 16.75 2.9665 15.9884 2.85006 14.9792L1.553 3.75H1C0.75454 3.75 0.550392 3.57312 0.508056 3.33988L0.5 3.25C0.5 2.97386 0.723858 2.75 1 2.75H9.5ZM13.438 3.75H2.561L3.84347 14.8646C3.90169 15.3692 4.32894 15.75 4.83688 15.75H11.1631C11.6711 15.75 12.0983 15.3692 12.1565 14.8646L13.438 3.75ZM6.5 6.25C6.74546 6.25 6.94961 6.40477 6.99194 6.60886L7 6.6875V12.8125C7 13.0541 6.77614 13.25 6.5 13.25C6.25454 13.25 6.05039 13.0952 6.00806 12.8911L6 12.8125V6.6875C6 6.44588 6.22386 6.25 6.5 6.25ZM9.5 6.25C9.74546 6.25 9.94961 6.40477 9.99194 6.60886L10 6.6875V12.8125C10 13.0541 9.77614 13.25 9.5 13.25C9.25454 13.25 9.05039 13.0952 9.00806 12.8911L9 12.8125V6.6875C9 6.44588 9.22386 6.25 9.5 6.25Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    );\n  }\n}\n",":host {\n  display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'edit-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class EditIcon {\n  @Prop() width: string = '16';\n  @Prop() height: string = '16';\n\n  render() {\n    return (\n      <svg width={this.width} height={this.height} viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M11.245 0.817394C12.3318 -0.269413 14.0938 -0.269413 15.1806 0.817394C16.2222 1.85892 16.2656 3.5206 15.3108 4.6138L15.1806 4.75307L5.57482 14.3589C5.36973 14.564 5.12299 14.7215 4.85212 14.8213L4.68684 14.8742L0.631867 15.9801C0.285278 16.0746 -0.0347856 15.7861 0.00276241 15.4455L0.0179263 15.3662L1.12383 11.3112C1.20014 11.0314 1.33621 10.7722 1.52188 10.5511L1.63914 10.4232L11.245 0.817394ZM10.3848 3.09229L2.34625 11.1303C2.25396 11.2226 2.18093 11.3318 2.13086 11.4514L2.08859 11.5743L1.21196 14.785L4.42372 13.9094C4.50767 13.8865 4.5879 13.8529 4.66253 13.8096L4.77003 13.7375L4.86771 13.6518L12.9058 5.61329L10.3848 3.09229ZM14.4735 1.5245C13.8159 0.8669 12.7725 0.830367 12.072 1.4149L11.9521 1.5245L11.0918 2.38529L13.6128 4.90629L14.4735 4.04596C15.1311 3.38836 15.1677 2.34488 14.5831 1.64441L14.4735 1.5245Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    );\n  }\n}\n",":host {\n  display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'eye-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class EyeIcon {\n  @Prop() width: string = '16';\n  @Prop() height: string = '16';\n\n  render() {\n    return (\n      <svg width={this.width} height={this.height} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M1.25909 7.35214C1.94254 4.07689 4.79437 1.75 8.00002 1.75C11.2057 1.75 14.0574 4.07688 14.7409 7.35215C14.7974 7.62246 15.0622 7.79587 15.3325 7.73946C15.6029 7.68304 15.7763 7.41817 15.7199 7.14785C14.9425 3.42312 11.6934 0.75 8.00002 0.75C4.3066 0.75 1.05742 3.42311 0.280175 7.14786C0.223767 7.41818 0.397177 7.68305 0.667497 7.73946C0.937817 7.79587 1.20268 7.62246 1.25909 7.35214ZM7.98953 3.75C9.92253 3.75 11.4895 5.317 11.4895 7.25C11.4895 9.18299 9.92253 10.75 7.98953 10.75C6.05653 10.75 4.48953 9.18299 4.48953 7.25C4.48953 5.317 6.05653 3.75 7.98953 3.75Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAU,gCAChB,MAAAC,EAAeD,E,MCMFE,EAAQ,M,oCACK,K,YACC,I,CAEzB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAOC,KAAKD,MAAOE,OAAQD,KAAKC,OAAQC,KAAK,OAAOC,MAAM,8BAC7DN,EAAA,QAAAC,IAAA,2CACEM,EAAE,keACFF,KAAK,iB,aChBf,MAAMT,EAAU,kCAChB,MAAAY,EAAeZ,E,MCMFa,EAAU,M,oCACG,K,YACC,I,CAEzB,MAAAV,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAOC,KAAKD,MAAOE,OAAQD,KAAKC,OAAQC,KAAK,OAAOC,MAAM,8BAC7DN,EAAA,QAAAC,IAAA,2CACEM,EAAE,o+BACFF,KAAK,iB,aChBf,MAAMT,EAAU,gCAChB,MAAAc,EAAed,E,MCMFe,EAAQ,M,oCACK,K,YACC,I,CAEzB,MAAAZ,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAOC,KAAKD,MAAOE,OAAQD,KAAKC,OAAQQ,QAAQ,YAAYP,KAAK,OAAOC,MAAM,8BACjFN,EAAA,QAAAC,IAAA,2CACEM,EAAE,2zBACFF,KAAK,iB,aChBf,MAAMT,EAAU,+BAChB,MAAAiB,EAAejB,E,MCMFkB,EAAO,M,oCACM,K,YACC,I,CAEzB,MAAAf,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAOC,KAAKD,MAAOE,OAAQD,KAAKC,OAAQC,KAAK,OAAOC,MAAM,8BAC7DN,EAAA,QAAAC,IAAA,2CACEM,EAAE,2jBACFF,KAAK,iB"}

package/dist/nylas-web-elements/p-656cf33f.entry.js

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

package/dist/nylas-web-elements/{p-cf589eab.entry.js → p-65b7a2a7.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as i,a as s}from"./p-68c2fadf.js";import{a as o}from"./p-6c11737d.js";import"./p-02aa5f03.js";import"./p-cb65c223.js";const r=':host{display:block;position:relative;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:"Inter", sans-serif}@media screen and (max-width: 768px){:host{position:unset}}.dropdown{display:inline-block}.dropbtn{color:var(--nylas-base-800);padding:10px;font-size:1rem;font-family:var(--nylas-font-family);cursor:pointer;display:flex;gap:0.5rem;background:transparent;border:none;border-radius:var(--nylas-border-radius-2x);width:50px;padding:14px 16px;border-radius:var(--nylas-border-radius-2x)}.dropbtn.focus{background:transparent}.dropbtn:hover,.dropbtn:active{outline:1px solid var(--nylas-primary)}.dropbtn:active{outline:2px solid var(--nylas-primary)}.dropbtn span.chevron{display:flex;align-self:center}.dropbtn span.open{transform:rotate(90deg)}.dropbtn span.closed{transform:rotate(270deg)}.dropbtn span.selected-option{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:144px;font-size:14px;line-height:20px}@media screen and (max-width: 768px){.dropbtn span.selected-option{max-width:124px;font-size:16px}}.dropdown-content{display:block;margin-top:0.5rem;background-color:var(--nylas-base-0);max-width:306px;width:max-content;max-height:336px;overflow:auto;z-index:1;border-radius:4px;position:absolute;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.05);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1)}@media screen and (max-width: 768px){.dropdown-content{right:0;width:325px;max-width:unset}}.search-box{border-bottom:1px solid var(--nylas-base-200);padding:10px;position:sticky;top:0;background:var(--nylas-base-0)}.search-box .icon{position:absolute;top:1.25rem;left:1.25rem;color:var(--nylas-base-300)}.dropdown-content ul{padding:0;list-style-type:none;color:var(--nylas-base-900);max-height:336px}.dropdown-content ul li{padding:16px, 12px, 16px, 12px;color:black;padding:12px 16px;text-decoration:none;display:block;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;text-align:left;cursor:pointer}.dropdown-content ul li:hover,.dropdown-content ul li:focus{background-color:var(--nylas-base-100)}.dropdown-content .selected{background-color:#e7e7e7}input[type=text]{width:-webkit-fill-available;padding:inherit;border:1px solid #ccc;border-radius:4px;position:sticky;background:no-repeat scroll 7px 7px;padding-left:30px;background-size:16px 16px}';const n=r;const d=class{constructor(i){e(this,i);this.inputOptionChanged=t(this,"inputOptionChanged",7);this.name=undefined;this.options=[];this.defaultInputOption=undefined;this.inputValue=undefined;this.pluralizedLabel="";this.filterable=false;this.selectedOption=this.defaultInputOption||null;this.isOpen=false;this.filteredOptions=[...this.options];this.ariaActivedescendant="";this.shouldAutoScroll=false}optionsChangedHandler(e,t){if(e===t){return}this.filteredOptions=this.getFilteredOptions(e)}defaultSelectedOptionChangedHandler(e,t){if(e.label===t.label){return}this.selectedOption=e}inputValueChangedHandler(e,t){if(e===t){return}this.inputValue=e;this.filteredOptions=this.getFilteredOptions(this.options)}componentWillLoad(){this.filteredOptions=this.getFilteredOptions(this.options);if(!this.selectedOption&&!!this.defaultInputOption){this.selectedOption=this.defaultInputOption}if(!this.selectedOption&&this.options.length>0){this.selectedOption=this.options[0]}}getFilteredOptions(e){if(!this.filterable){return e}return e.filter((e=>e?.value?.toString().toLowerCase().includes(this.inputValue?.toLowerCase())||e?.label?.toLowerCase().includes(this.inputValue?.toLowerCase())))}toggleDropdown(){this.isOpen=!this.isOpen}selectOption(e){this.selectedOption=e;this.toggleDropdown();this.inputOptionChanged.emit({value:e.value,name:this.name})}handleOnInput(e){const t=e.target.value;const i=this.options.findIndex((e=>e.label.toLowerCase().includes(t.toLowerCase())));if(i>-1){this.scrollToViewWithinParent(i)}this.inputOptionChanged.emit({value:t,name:this.name})}scrollToViewWithinParent(e){const t=this.options[e];const i=this.el.shadowRoot?.getElementById(t.value.toString());const s=this.optionsRef;this.ariaActivedescendant=t.value.toString();if(!i||!s)return;const o=i.getBoundingClientRect();const r=s.getBoundingClientRect();if(o.top<r.top){s.scrollTop-=r.top-o.top}else if(o.bottom>r.bottom){s.scrollTop+=o.bottom-r.bottom}}handleSelectButtonKeyDown(e){switch(e.key){case"ArrowDown":case"Enter":e.preventDefault();if(!this.isOpen){this.toggleDropdown()}this.inputRef?.focus();break;case"Escape":this.isOpen=false;break}}handleClick(e){if(this.isOpen){const t=e.target.value;const i=this.options.findIndex((e=>e.label.toLowerCase().includes(t.toLowerCase())));if(i>-1){setTimeout((()=>{this.scrollToViewWithinParent(i)}),10)}}}handleListboxKeydown(e){const t=this.filteredOptions;const i=t.findIndex((e=>e.value===this.ariaActivedescendant));if(e.key==="ArrowDown"||e.key==="Tab"&&!e.shiftKey){e.preventDefault();if(i===t.length-1){this.ariaActivedescendant="";this.inputRef?.focus();return}const s=i+1<t.length?i+1:0;this.ariaActivedescendant=t[s].value;this.focusOption(s)}else if(e.key==="ArrowUp"||e.key==="Tab"&&e.shiftKey){e.preventDefault();if(i===0){this.ariaActivedescendant="";this.inputRef?.focus();return}const s=i-1>=0?i-1:t.length-1;this.ariaActivedescendant=t[s].value;this.focusOption(s)}else if(e.key==="Enter"){e.preventDefault();if(this.ariaActivedescendant){this.selectOption(t[i])}}else if(e.key==="Escape"){this.isOpen=false}}focusOption(e){const t=this.filteredOptions[e];if(!t)return;const i=t.value;const s=this.el.shadowRoot?.getElementById(i);if(s){s.focus();s.scrollIntoView({behavior:"smooth",block:"nearest"})}}handleComboboxKeyDown(e){if(e.key==="ArrowDown"||e.key=="Tab"&&!e.shiftKey){e.preventDefault();if(!this.isOpen){this.isOpen=true;this.shouldAutoScroll=true;return}this.ariaActivedescendant=this.filteredOptions[0].value;this.focusOption(0)}else if(e.key==="ArrowUp"||e.key==="Tab"&&e.shiftKey){e.preventDefault();this.ariaActivedescendant=this.filteredOptions[this.filteredOptions.length-1].value;this.focusOption(this.filteredOptions.length-1)}else if(e.key==="Escape"){this.isOpen=false}}handleOutsideClick(e){const t=e.composedPath();const i=t.includes(this.el);if(!i&&this.isOpen){this.isOpen=false}}render(){return i("div",{key:"f24f51f36cb7c1e858d98cc0afd14982f3abef62",class:"dropdown",part:"id_dropdown"},i("input",{key:"a428ff94a6465706c010e870dd93c9a24bf66b71",type:"text",name:this.name,id:this.name,part:"id_dropdown-input",class:{dropbtn:true,open:this.isOpen},value:this.inputValue,onClick:e=>{this.toggleDropdown();this.shouldAutoScroll=true;this.handleClick(e)},"aria-haspopup":"listbox","aria-label":this.name,"aria-expanded":this.isOpen?"true":"false",onKeyDown:e=>this.handleComboboxKeyDown(e),onInput:e=>this.handleOnInput(e)}),this.isOpen?i("div",{class:"dropdown-content",part:"id_dropdown-content",ref:e=>this.optionsRef=e},i("ul",{tabindex:"-1",role:"listbox","aria-label":this.name,"aria-activedescendant":this.ariaActivedescendant,onKeyDown:e=>this.handleListboxKeydown(e)},this.filteredOptions.map((e=>i("li",{tabindex:"0",key:e.value,id:e.value,onClick:()=>this.selectOption(e),role:"option",class:{focused:this.ariaActivedescendant===e.value.toString()}},e.labelHTML?e.labelHTML:e.label))))):null)}get el(){return s(this)}static get watchers(){return{options:["optionsChangedHandler"],defaultInputOption:["defaultSelectedOptionChangedHandler"],inputValue:["inputValueChangedHandler"]}}};d.style=n;const a=".time-period-selector.sc-time-period-selector{display:grid;gap:0.5rem;grid-template-columns:auto 1fr}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector,.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector{border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector{width:116px}.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector{width:84px;display:flex;align-items:center}.time-period-selector.sc-time-period-selector select-dropdown#time-period.sc-time-period-selector::part(sd_dropdown-button){width:100%}.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector::part(id_dropdown){width:inherit;height:100%}.time-period-selector.sc-time-period-selector input-dropdown#time-number.sc-time-period-selector::part(id_dropdown-input){border:none;border-radius:var(--nylas-border-radius-2x)}.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector::part(id_dropdown-input){padding:17px;gap:1rem}.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector::part(id_dropdown-content){width:100%;max-height:200px}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector::part(sd_dropdown){width:inherit}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector::part(sd_dropdown-button){padding:1rem;gap:1rem;justify-content:space-between}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector::part(sd_dropdown-content){width:100%;max-height:200px}";const p=a;const l={hours:"hour",days:"day",weeks:"week",months:"month"};const c=class{constructor(i){e(this,i);this.timePeriodChanged=t(this,"timePeriodChanged",7);this.timePeriods=["hour","day","week","month"];this.defaultSelectedPeriod="hour";this.defaultSelectedNumber=1;this.selectedPeriod=this.defaultSelectedPeriod;this.selectedNumber=this.defaultSelectedNumber;this.numberOptions=this.calculateOptions(this.defaultSelectedPeriod||"hour").map((e=>({label:e.toString(),value:e.toString()})));this.timePeriodOptions=this.timePeriods.map((e=>({label:e,value:e})))}defaultSelectedPeriodChangedHandler(e){this.selectedPeriod=e;const t=l[e]??e;this.updateNumberOptionsAndSelectedNumber(t)}defaultSelectedNumberChangedHandler(e){this.selectedNumber=e}timePeriodsChangedHandler(e){this.timePeriodOptions=e.map((e=>({label:e,value:e})))}calculateOptions(e){switch(e){case"hour":return Array.from({length:23},((e,t)=>t+1));case"minute":return Array.from({length:13},((e,t)=>t*5));case"day":return Array.from({length:30},((e,t)=>t+1));case"week":return Array.from({length:4},((e,t)=>t+1));case"month":return Array.from({length:12},((e,t)=>t+1));default:return[]}}inputOptionChangedHandler(e){o("time-period-selector","inputOptionChangedHandler",e.detail);const{value:t,name:i}=e.detail;if(i==="time-number"){this.selectedNumber=parseInt(t)}const s={number:this.selectedNumber,period:this.selectedPeriod};this.timePeriodChanged.emit(s)}nylasFormDropdownChangedHandler(e){o("time-period-selector","nylasFormDropdownChangedHandler",e.detail);const{value:t,name:i}=e.detail;if(i==="time-period"){this.selectedPeriod=t;this.updateNumberOptionsAndSelectedNumber(t)}else if(i==="time-number"){this.selectedNumber=parseInt(t)}const s={number:this.selectedNumber,period:this.selectedPeriod};this.timePeriodChanged.emit(s)}updateNumberOptionsAndSelectedNumber(e){const t=this.calculateOptions(e);this.numberOptions=t.map((e=>({label:e.toString(),value:e.toString()})));this.selectedNumber=parseInt(this.numberOptions[0].value)}render(){return i("div",{key:"16369c31aac0c3b2946d960ac2f923423a280048",class:"time-period-selector"},i("input-dropdown",{key:"e90cae47ddac8cb81f1cc5fae641a0e75712340b",id:"time-number",name:"time-number",inputValue:this.selectedNumber.toString(),exportparts:"sd_dropdown: tps__number-dropdown, sd_dropdown-button: tps__number-dropdown-button, sd_dropdown-content: tps__number-dropdown-content",options:this.numberOptions,defaultInputOption:this.numberOptions.find((e=>e.value==this.selectedNumber.toString()))??this.numberOptions[0]}),i("select-dropdown",{key:"3033e8a49a0824f9e982a9a54102778f54213da2",id:"time-period",name:"time-period",options:this.timePeriodOptions,exportparts:"sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content",pluralizedLabel:this.selectedNumber>1?"s":"",defaultSelectedOption:this.timePeriodOptions.find((e=>e.value==this.selectedPeriod))??this.timePeriodOptions[0],withSearch:false}))}get host(){return s(this)}static get watchers(){return{defaultSelectedPeriod:["defaultSelectedPeriodChangedHandler"],defaultSelectedNumber:["defaultSelectedNumberChangedHandler"],timePeriods:["timePeriodsChangedHandler"]}}};c.style=p;export{d as input_dropdown,c as time_period_selector};
-//# sourceMappingURL=p-cf589eab.entry.js.map
+import{r as e,c as t,h as i,a as s}from"./p-68c2fadf.js";import{a as o}from"./p-6c11737d.js";import"./p-02aa5f03.js";import"./p-cb65c223.js";const r=':host{display:block;position:relative;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:"Inter", sans-serif}@media screen and (max-width: 768px){:host{position:unset}}.dropdown{display:inline-block}.dropbtn{color:var(--nylas-base-800);padding:10px;font-size:1rem;font-family:var(--nylas-font-family);cursor:pointer;display:flex;gap:0.5rem;background:transparent;border:none;border-radius:var(--nylas-border-radius-2x);width:50px;padding:14px 16px;border-radius:var(--nylas-border-radius-2x)}.dropbtn.focus{background:transparent}.dropbtn:hover,.dropbtn:active{outline:1px solid var(--nylas-primary)}.dropbtn:active{outline:2px solid var(--nylas-primary)}.dropbtn span.chevron{display:flex;align-self:center}.dropbtn span.open{transform:rotate(90deg)}.dropbtn span.closed{transform:rotate(270deg)}.dropbtn span.selected-option{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:144px;font-size:14px;line-height:20px}@media screen and (max-width: 768px){.dropbtn span.selected-option{max-width:124px;font-size:16px}}.dropdown-content{display:block;margin-top:0.5rem;background-color:var(--nylas-base-0);max-width:306px;width:max-content;max-height:336px;overflow:auto;z-index:1;border-radius:4px;position:absolute;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.05);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1)}@media screen and (max-width: 768px){.dropdown-content{right:0;width:325px;max-width:unset}}.search-box{border-bottom:1px solid var(--nylas-base-200);padding:10px;position:sticky;top:0;background:var(--nylas-base-0)}.search-box .icon{position:absolute;top:1.25rem;left:1.25rem;color:var(--nylas-base-300)}.dropdown-content ul{padding:0;list-style-type:none;color:var(--nylas-base-900);max-height:336px}.dropdown-content ul li{padding:16px, 12px, 16px, 12px;color:black;padding:12px 16px;text-decoration:none;display:block;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;text-align:left;cursor:pointer}.dropdown-content ul li:hover,.dropdown-content ul li:focus{background-color:var(--nylas-base-100)}.dropdown-content .selected{background-color:#e7e7e7}input[type=text]{width:-webkit-fill-available;padding:inherit;border:1px solid #ccc;border-radius:4px;position:sticky;background:no-repeat scroll 7px 7px;padding-left:30px;background-size:16px 16px}';const n=r;const d=class{constructor(i){e(this,i);this.inputOptionChanged=t(this,"inputOptionChanged",7);this.name=undefined;this.options=[];this.defaultInputOption=undefined;this.inputValue=undefined;this.pluralizedLabel="";this.filterable=false;this.selectedOption=this.defaultInputOption||null;this.isOpen=false;this.filteredOptions=[...this.options];this.ariaActivedescendant="";this.shouldAutoScroll=false}optionsChangedHandler(e,t){if(e===t){return}this.filteredOptions=this.getFilteredOptions(e)}defaultSelectedOptionChangedHandler(e,t){if(e.label===t.label){return}this.selectedOption=e}inputValueChangedHandler(e,t){if(e===t){return}this.inputValue=e;this.filteredOptions=this.getFilteredOptions(this.options)}componentWillLoad(){this.filteredOptions=this.getFilteredOptions(this.options);if(!this.selectedOption&&!!this.defaultInputOption){this.selectedOption=this.defaultInputOption}if(!this.selectedOption&&this.options.length>0){this.selectedOption=this.options[0]}}getFilteredOptions(e){if(!this.filterable){return e}return e.filter((e=>e?.value?.toString().toLowerCase().includes(this.inputValue?.toLowerCase())||e?.label?.toLowerCase().includes(this.inputValue?.toLowerCase())))}toggleDropdown(){this.isOpen=!this.isOpen}selectOption(e){this.selectedOption=e;this.toggleDropdown();this.inputOptionChanged.emit({value:e.value,name:this.name})}handleOnInput(e){const t=e.target.value;const i=this.options.findIndex((e=>e.label.toLowerCase().includes(t.toLowerCase())));if(i>-1){this.scrollToViewWithinParent(i)}this.inputOptionChanged.emit({value:t,name:this.name})}scrollToViewWithinParent(e){const t=this.options[e];const i=this.el.shadowRoot?.getElementById(t.value.toString());const s=this.optionsRef;this.ariaActivedescendant=t.value.toString();if(!i||!s)return;const o=i.getBoundingClientRect();const r=s.getBoundingClientRect();if(o.top<r.top){s.scrollTop-=r.top-o.top}else if(o.bottom>r.bottom){s.scrollTop+=o.bottom-r.bottom}}handleSelectButtonKeyDown(e){switch(e.key){case"ArrowDown":case"Enter":e.preventDefault();if(!this.isOpen){this.toggleDropdown()}this.inputRef?.focus();break;case"Escape":this.isOpen=false;break}}handleClick(e){if(this.isOpen){const t=e.target.value;const i=this.options.findIndex((e=>e.label.toLowerCase().includes(t.toLowerCase())));if(i>-1){setTimeout((()=>{this.scrollToViewWithinParent(i)}),10)}}}handleListboxKeydown(e){const t=this.filteredOptions;const i=t.findIndex((e=>e.value===this.ariaActivedescendant));if(e.key==="ArrowDown"||e.key==="Tab"&&!e.shiftKey){e.preventDefault();if(i===t.length-1){this.ariaActivedescendant="";this.inputRef?.focus();return}const s=i+1<t.length?i+1:0;this.ariaActivedescendant=t[s].value;this.focusOption(s)}else if(e.key==="ArrowUp"||e.key==="Tab"&&e.shiftKey){e.preventDefault();if(i===0){this.ariaActivedescendant="";this.inputRef?.focus();return}const s=i-1>=0?i-1:t.length-1;this.ariaActivedescendant=t[s].value;this.focusOption(s)}else if(e.key==="Enter"){e.preventDefault();if(this.ariaActivedescendant){this.selectOption(t[i])}}else if(e.key==="Escape"){this.isOpen=false}}focusOption(e){const t=this.filteredOptions[e];if(!t)return;const i=t.value;const s=this.el.shadowRoot?.getElementById(i);if(s){s.focus();s.scrollIntoView({behavior:"smooth",block:"nearest"})}}handleComboboxKeyDown(e){if(e.key==="ArrowDown"||e.key=="Tab"&&!e.shiftKey){e.preventDefault();if(!this.isOpen){this.isOpen=true;this.shouldAutoScroll=true;return}this.ariaActivedescendant=this.filteredOptions[0].value;this.focusOption(0)}else if(e.key==="ArrowUp"||e.key==="Tab"&&e.shiftKey){e.preventDefault();this.ariaActivedescendant=this.filteredOptions[this.filteredOptions.length-1].value;this.focusOption(this.filteredOptions.length-1)}else if(e.key==="Escape"){this.isOpen=false}}handleOutsideClick(e){const t=e.composedPath();const i=t.includes(this.el);if(!i&&this.isOpen){this.isOpen=false}}render(){return i("div",{key:"9c59bf5935fe15c27f2ece008a59d245158e24e0",class:"dropdown",part:"id_dropdown"},i("input",{key:"bc16931dc1a6a1a3192cc440afe075b53e6419a6",type:"text",name:this.name,id:this.name,part:"id_dropdown-input",class:{dropbtn:true,open:this.isOpen},value:this.inputValue,onClick:e=>{this.toggleDropdown();this.shouldAutoScroll=true;this.handleClick(e)},"aria-haspopup":"listbox","aria-label":this.name,"aria-expanded":this.isOpen?"true":"false",onKeyDown:e=>this.handleComboboxKeyDown(e),onInput:e=>this.handleOnInput(e)}),this.isOpen?i("div",{class:"dropdown-content",part:"id_dropdown-content",ref:e=>this.optionsRef=e},i("ul",{tabindex:"-1",role:"listbox","aria-label":this.name,"aria-activedescendant":this.ariaActivedescendant,onKeyDown:e=>this.handleListboxKeydown(e)},this.filteredOptions.map((e=>i("li",{tabindex:"0",key:e.value,id:e.value,onClick:()=>this.selectOption(e),role:"option",class:{focused:this.ariaActivedescendant===e.value.toString()}},e.labelHTML?e.labelHTML:e.label))))):null)}get el(){return s(this)}static get watchers(){return{options:["optionsChangedHandler"],defaultInputOption:["defaultSelectedOptionChangedHandler"],inputValue:["inputValueChangedHandler"]}}};d.style=n;const a=".time-period-selector.sc-time-period-selector{display:grid;gap:0.5rem;grid-template-columns:auto 1fr}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector,.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector{border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector{width:116px}.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector{width:84px;display:flex;align-items:center}.time-period-selector.sc-time-period-selector select-dropdown#time-period.sc-time-period-selector::part(sd_dropdown-button){width:100%}.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector::part(id_dropdown){width:inherit;height:100%}.time-period-selector.sc-time-period-selector input-dropdown#time-number.sc-time-period-selector::part(id_dropdown-input){border:none;border-radius:var(--nylas-border-radius-2x)}.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector::part(id_dropdown-input){padding:17px;gap:1rem}.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector::part(id_dropdown-content){width:100%;max-height:200px}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector::part(sd_dropdown){width:inherit}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector::part(sd_dropdown-button){padding:1rem;gap:1rem;justify-content:space-between}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector::part(sd_dropdown-content){width:100%;max-height:200px}";const p=a;const l={hours:"hour",days:"day",weeks:"week",months:"month"};const c=class{constructor(i){e(this,i);this.timePeriodChanged=t(this,"timePeriodChanged",7);this.timePeriods=["hour","day","week","month"];this.defaultSelectedPeriod="hour";this.defaultSelectedNumber=1;this.selectedPeriod=this.defaultSelectedPeriod;this.selectedNumber=this.defaultSelectedNumber;this.numberOptions=this.calculateOptions(this.defaultSelectedPeriod||"hour").map((e=>({label:e.toString(),value:e.toString()})));this.timePeriodOptions=this.timePeriods.map((e=>({label:e,value:e})))}defaultSelectedPeriodChangedHandler(e){this.selectedPeriod=e;const t=l[e]??e;this.updateNumberOptionsAndSelectedNumber(t)}defaultSelectedNumberChangedHandler(e){this.selectedNumber=e}timePeriodsChangedHandler(e){this.timePeriodOptions=e.map((e=>({label:e,value:e})))}calculateOptions(e){switch(e){case"hour":return Array.from({length:23},((e,t)=>t+1));case"minute":return Array.from({length:13},((e,t)=>t*5));case"day":return Array.from({length:30},((e,t)=>t+1));case"week":return Array.from({length:4},((e,t)=>t+1));case"month":return Array.from({length:12},((e,t)=>t+1));default:return[]}}inputOptionChangedHandler(e){o("time-period-selector","inputOptionChangedHandler",e.detail);const{value:t,name:i}=e.detail;if(i==="time-number"){this.selectedNumber=parseInt(t)}const s={number:this.selectedNumber,period:this.selectedPeriod};this.timePeriodChanged.emit(s)}nylasFormDropdownChangedHandler(e){o("time-period-selector","nylasFormDropdownChangedHandler",e.detail);const{value:t,name:i}=e.detail;if(i==="time-period"){this.selectedPeriod=t;this.updateNumberOptionsAndSelectedNumber(t)}else if(i==="time-number"){this.selectedNumber=parseInt(t)}const s={number:this.selectedNumber,period:this.selectedPeriod};this.timePeriodChanged.emit(s)}updateNumberOptionsAndSelectedNumber(e){const t=this.calculateOptions(e);this.numberOptions=t.map((e=>({label:e.toString(),value:e.toString()})));this.selectedNumber=parseInt(this.numberOptions[0].value)}render(){return i("div",{key:"00e1115959b6f838c0ec39a27edbfa0b2e24ac01",class:"time-period-selector"},i("input-dropdown",{key:"1b669cbacab8c5d385c6a7edfe4a25044a6dddbe",id:"time-number",name:"time-number",inputValue:this.selectedNumber.toString(),exportparts:"sd_dropdown: tps__number-dropdown, sd_dropdown-button: tps__number-dropdown-button, sd_dropdown-content: tps__number-dropdown-content",options:this.numberOptions,defaultInputOption:this.numberOptions.find((e=>e.value==this.selectedNumber.toString()))??this.numberOptions[0]}),i("select-dropdown",{key:"c68685b0d8e4ef284c09d40bf78e9c2d94f82fff",id:"time-period",name:"time-period",options:this.timePeriodOptions,exportparts:"sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content",pluralizedLabel:this.selectedNumber>1?"s":"",defaultSelectedOption:this.timePeriodOptions.find((e=>e.value==this.selectedPeriod))??this.timePeriodOptions[0],withSearch:false}))}get host(){return s(this)}static get watchers(){return{defaultSelectedPeriod:["defaultSelectedPeriodChangedHandler"],defaultSelectedNumber:["defaultSelectedNumberChangedHandler"],timePeriods:["timePeriodsChangedHandler"]}}};c.style=p;export{d as input_dropdown,c as time_period_selector};
+//# sourceMappingURL=p-65b7a2a7.entry.js.map