@nylas/web-elements 2.0.6 → 2.1.0

package/dist/nylas-web-elements/{p-88e68e14.entry.js → p-6adb19cf.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as s,h as a,a as i,H as t}from"./p-6f5a3998.js";import{r,a as l,i as n,O as o,P as c,F as h,Q as f,R as d,G as y}from"./p-17c5fb16.js";import{L as p}from"./p-7e885253.js";import{c as b}from"./p-d45012f2.js";const u=':host{display:block;height:auto;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-50:#ffeae8;--nylas-error-100:#ffc5bf;--nylas-error-200:#fecaca;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:"Inter", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff;width:100%}label{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%;flex-direction:column;gap:4px;font-family:var(--nylas-font-family);font-size:16px;color:var(--nylas-base-800)}label.error{color:var(--nylas-error)}label span.required{color:var(--nylas-error);padding:0 0.25rem}label p{margin:0}label .error{color:var(--nylas-error);border-color:var(--nylas-error)}.input_wrapper{display:flex;align-items:center;gap:1rem}input[type=date]{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:100%;width:-moz-available;width:-webkit-fill-available;font-family:var(--nylas-font-family);padding:0 8px;cursor:pointer}input[type=date]:focus{outline-color:var(--nylas-primary)}input[type=date].error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}input[type=date].error::placeholder{font-weight:400}input[type=date]::placeholder{color:var(--nylas-base-300)}input[type=date]::-webkit-calendar-picker-indicator{filter:invert(37%) sepia(51%) saturate(6324%) hue-rotate(215deg) brightness(94%) contrast(95%);cursor:pointer}input:read-only{background-color:var(--nylas-base-100);cursor:not-allowed}';const m=u;const g={date:"YYYY-MM-DD"};const x=class{constructor(a){e(this,a);this.nylasFormInputChanged=s(this,"nylasFormInputChanged",7);this.nylasFormInputFocused=s(this,"nylasFormInputFocused",7);this.nylasFormInputBlurred=s(this,"nylasFormInputBlurred",7);this.name="input";this.defaultValue=undefined;this.label="";this.placeholder=g["date"];this.required=false;this.readOnly=false;this.autoFocus=false;this.pattern=undefined;this.maxLength=255;this.patternError="";this.requiredError="";this.errorMessage="";this.minDate=undefined;this.hasError=false;this.themeConfig=undefined;this.value=undefined;this.error="";this.isDateValid=true}handleDefaultValueChange(e){this.value=r(e);if(this.value){this.validatePattern(this.value,true)}}themeConfigChangedHandler(e,s){if(e===s)return;this.applyThemeConfig(e)}applyThemeConfig(e){if(e){for(const[s,a]of Object.entries(e)){this.el.style.setProperty(`${s}`,a)}}}componentDidLoad(){this.value=r(this.defaultValue||"");if(this.value){this.validatePattern(this.value,true)}this.applyThemeConfig(this.themeConfig)}handleBookingFormSubmitted(e){this.validatePattern(this.value);if(this.error){e.preventDefault()}}async handleFormSubmitted(e){this.validatePattern(this.value);if(this.error){e.preventDefault()}}handleInput(e){this.error="";const s=e.target;this.value=r(s.value);this.isDateValid=s.validity.valid;this.nylasFormInputChanged.emit({value:this.value,name:this.name,label:this.label,error:this.error,type:"date"})}handleBlur(){this.nylasFormInputBlurred.emit({value:this.value,name:this.name})}handleFocus(){this.nylasFormInputFocused.emit({value:this.value,name:this.name})}validatePattern(e,s=false){this.error="";if(!s&&(this.required&&!this.isDateValid||this.minDate&&new Date(this.minDate)>new Date(e))){this.error=this.errorMessage||"Please enter a valid date";this.nylasFormInputChanged.emit({value:this.value,name:this.name,label:this.label,error:this.error,type:"date"});return}if(this.required&&!e){this.error=this.requiredError||"This field is required.";return}if(!this.pattern||!e&&!this.required)return;if(this.pattern.test(e)){this.error=""}else{this.error=this.patternError||"Invalid format."}}render(){return a("label",{key:"19e91d1f34df671a8c3fb97ca4cb9361baccaeb3",part:"ic__label",class:{error:!!this.error||this.hasError}},this.label&&a("p",null,a("span",{class:"label"},this.label),this.required&&a("span",{class:"required"},"*")),a("div",{key:"fd3f370a7469135b82c876938a5c1df1faedfd31",part:"ic__input_wrapper",class:"input_wrapper"},a("input",{key:"a27ac166f7512464ed9e2caf10539ae60e0df92a",type:"date",name:this.name,part:"ic__date",title:this.readOnly?"read-only field":undefined,readOnly:this.readOnly,autoFocus:this.autoFocus,value:this.value,min:this.minDate,maxLength:this.maxLength,placeholder:this.placeholder,class:{error:!!this.error||this.hasError},onInput:e=>this.handleInput(e),onFocus:()=>this.handleFocus(),onBlur:()=>this.handleBlur()}),a("slot",{key:"2d3806006d35fecaa9b48a878eb4216249cdc80f",name:"additional-input"})),this.error&&a("span",{class:"error help-text"},this.error))}get el(){return i(this)}static get watchers(){return{defaultValue:["handleDefaultValueChange"],themeConfig:["themeConfigChangedHandler"]}}};x.style=m;const k=':host{display:block;position:relative;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-50:#ffeae8;--nylas-error-100:#ffc5bf;--nylas-error-200:#fecaca;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:"Inter", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff}.time-picker{display:inline-block;width:150px;font-family:var(--nylas-font-family);position:relative}@media screen and (max-width: 768px){.time-picker{width:auto}}.time-picker input{width:150px;height:48px;text-align:center;font-size:16px;font-family:inherit;color:var(--nylas-base-900);cursor:pointer;background:var(--nylas-base-0);border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}@media screen and (max-width: 768px){.time-picker input{width:88px}}@media screen and (max-width: 504px){.time-picker input{width:68px;font-size:15px}}.time-picker input.focus{background:var(--nylas-base-0)}.time-picker input:hover,.time-picker input:active{border:1px solid var(--nylas-primary)}.time-picker input:active{outline:2px solid var(--nylas-primary)}.time-picker input span.open{transform:rotate(90deg)}.time-picker input span.closed{transform:rotate(270deg)}.time-picker input.error{border:1px solid var(--nylas-error)}.time-picker p.error{color:var(--nylas-error);font-size:0.875rem;margin:0}.times{display:block;margin-top:0.5rem;background-color:var(--nylas-base-0);width:100%;max-height:336px;overflow:auto;border:1px solid #ddd;z-index:1;border-radius:4px;position:absolute;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.0509803922);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1019607843)}.times ul{padding:0;list-style-type:none;color:var(--nylas-base-900);max-height:336px}.times 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:center;cursor:pointer}.times ul li.focused{background-color:var(--nylas-base-100)}.times ul li:hover,.times ul li:focus{background-color:var(--nylas-base-100)}.times ul li label{display:flex;align-items:center;gap:0.5rem}.times ul li label input{margin:0}';const v=k;l.extend(b);const w=class{constructor(a){e(this,a);this.timeChange=s(this,"timeChange",7);this.timeWindowFormError=s(this,"timeWindowFormError",7);this.time=undefined;this.minimumStartTime=null;this.placeholder="hh:mmam/pm";this.name=undefined;this.hasError=false;this.language=p.en;this.themeConfig=undefined;this.err="";this.showTimes=false;this.ariaActivedescendant="";this.times=this.generateTimes();this.shouldAutoScroll=false}handleOutsideClick(e){const s=e.composedPath();const a=s.includes(this.el);if(!a&&this.showTimes){this.showTimes=false}}timeChangedHandler(){this.validateTimeAgainstMinimum()}minimumStartTimeChangedHandler(){this.validateTimeAgainstMinimum()}themeConfigChangedHandler(e,s){this.applyThemeConfig(e)}applyThemeConfig(e){if(e){for(const[s,a]of Object.entries(e)){this.el.style.setProperty(`${s}`,a)}}}validateTimeAgainstMinimum(){if(this.minimumStartTime){const e=l(this.minimumStartTime,"hh:mma");const s=l(this.time,"hh:mma");this.times=this.generateTimes();const a=n.t("nylasTimeWindowPicker.errors.invalid");if(s.isBefore(e)){this.err=a;this.timeWindowFormError.emit({key:this.el.id,message:a})}else{this.err="";this.timeWindowFormError.emit({key:this.el.id,message:""})}}else{this.err="";this.timeWindowFormError.emit({key:this.el.id,message:""})}}componentDidLoad(){this.validateTimeAgainstMinimum();this.applyThemeConfig(this.themeConfig)}componentDidRender(){if(this.showTimes&&this.shouldAutoScroll){const e=o(this.time);const s=this.times.findIndex((s=>s.value===e));if(s>-1){this.shouldAutoScroll=false;this.scrollToViewWithinParent(s)}return}}handleTimeChange(e,s){const a=s.split(":");if(a[0]==="00"&&a[1].slice(-2)=="pm"){const e=n.t("nylasTimeWindowPicker.errors.invalid");this.err=e;this.timeWindowFormError.emit({key:this.el.id,message:e})}if(!c(s)){const e=n.t("nylasTimeWindowPicker.errors.invalid");this.err=e;this.timeWindowFormError.emit({key:this.el.id,message:e})}else{this.err="";this.timeWindowFormError.emit({key:this.el.id,message:""})}if(this.err){return}this.timeChange.emit({key:this.el.id,value:s})}handleTimeAutocomplete(e){const s=e.target?.value;const a=this.language!==p.en?h(s):s;const i=n.t("nylasTimeWindowPicker.errors.invalid");if(!c(a)){this.err=i;this.timeWindowFormError.emit({key:this.el.id,message:i});return}if(a===""){const e=f().format("hh:mma");this.timeChange.emit({key:this.el.id,value:e});return}if(!d(a)){const e=o(a);this.timeChange.emit({key:this.el.id,value:e});return}this.timeChange.emit({key:this.el.id,value:a})}handleOnInput(e){const s=e.target?.value;if(!c(s)){return}if(s===""){const e=f().format("hh:mma");const s=this.times.findIndex((s=>s.value===e));if(s>-1){this.scrollToViewWithinParent(s)}return}if(!d(s)){const e=o(s);const a=this.times.findIndex((s=>s.value===e));if(a>-1){this.scrollToViewWithinParent(a)}return}}generateTimes(){const e=[];let s=l().set("hour",0).set("minute",0).set("second",0);if(this.minimumStartTime){s=l(this.minimumStartTime,"hh:mma")}const a=s.endOf("day").diff(s,"minutes");const i=Math.round(a/15);for(let a=0;a<i+1;a++){const t=s.add(a*15,"minute");if(a==i&&t.format("hh:mma").includes("am")){break}e.push({id:a,value:t.format("hh:mma")})}return e}handleComboboxKeyDown(e){if(e.key==="ArrowDown"){e.preventDefault();if(!this.showTimes){this.showTimes=true;this.shouldAutoScroll=true;return}if(this.ariaActivedescendant===""){this.ariaActivedescendant=this.times[0].id.toString();this.focusOption(0)}else{const e=this.times.findIndex((e=>e.id.toString()===this.ariaActivedescendant));const s=e+1<this.times.length?e+1:0;this.ariaActivedescendant=this.times[s].id.toString();this.focusOption(s)}}else if(e.key==="ArrowUp"){e.preventDefault();if(this.ariaActivedescendant===""){this.ariaActivedescendant=this.times[this.times.length-1].id.toString();this.focusOption(this.times.length-1)}else{const e=this.times.findIndex((e=>e.id.toString()===this.ariaActivedescendant));const s=e-1>=0?e-1:this.times.length-1;this.ariaActivedescendant=this.times[s].id.toString();this.focusOption(s)}}else if(e.key==="Escape"){this.showTimes=false;this.timeInput.focus()}}handleListboxKeydown(e){const s=this.times;const a=s.findIndex((e=>e.id.toString()===this.ariaActivedescendant));if(e.key==="ArrowDown"||e.key==="Tab"&&!e.shiftKey){e.preventDefault();const i=a+1<s.length?a+1:0;this.ariaActivedescendant=s[i].id.toString();this.focusOption(i)}else if(e.key==="ArrowUp"||e.key==="Tab"&&e.shiftKey){e.preventDefault();const i=a-1>=0?a-1:s.length-1;this.ariaActivedescendant=s[i].id.toString();this.focusOption(i)}else if(e.key==="Enter"){e.preventDefault();if(this.ariaActivedescendant){const i=s[a];this.handleTimeChange(e,i.value);this.showTimes=false;this.ariaActivedescendant="";this.timeInput.focus()}}else if(e.key==="Escape"){this.showTimes=false;this.timeInput.focus()}}scrollToViewWithinParent(e){const s=this.times[e];const a=this.el.shadowRoot?.getElementById(s.id.toString());const i=this.timeMenu;this.ariaActivedescendant=s.id.toString();const t=a.getBoundingClientRect();const r=i.getBoundingClientRect();if(t.top<r.top){i.scrollTop-=r.top-t.top}else if(t.bottom>r.bottom){i.scrollTop+=t.bottom-r.bottom}if(t.left<r.left){i.scrollLeft-=r.left-t.left}else if(t.right>r.right){i.scrollLeft+=t.right-r.right}}focusOption(e){const s=this.times[e];if(!s)return;const a=s.id.toString();const i=this.el.shadowRoot?.getElementById(a);if(i){i.focus();i.scrollIntoView({behavior:"smooth",block:"nearest"})}}render(){const e=this.language===p.en?false:true;return a(t,{key:"748ab1dcf12c2e1284ca11883dcaade689d3150f"},a("div",{key:"77369574660ea9e48f8ed77c4b4cc51cf328690a",class:"time-picker",part:"time-picker"},a("input",{key:"09fd3119ae7763a492068860d9a20ed06e1bf0ac",type:"text",name:this.name,id:this.name,part:"time-input",class:{"time-input":true,error:!!this.err||this.hasError},ref:e=>this.timeInput=e,value:e?y(this.time):this.time,onClick:()=>{this.showTimes=!this.showTimes;this.shouldAutoScroll=true},"aria-haspopup":"listbox","aria-label":this.name,"aria-expanded":this.showTimes?"true":"false",placeholder:this.placeholder,onKeyDown:e=>this.handleComboboxKeyDown(e),onInput:e=>this.handleOnInput(e),onBlur:e=>this.handleTimeAutocomplete(e)}),this.err&&a("div",{class:"invalid-time-icon"}),this.showTimes&&a("div",{class:"times",part:"times",ref:e=>this.timeMenu=e},a("ul",{tabindex:"-1",role:"listbox","aria-label":this.name,"aria-activedescendant":this.ariaActivedescendant,onKeyDown:e=>this.handleListboxKeydown(e)},this.times.map((s=>a("li",{tabindex:"0",key:s.id,id:s.id.toString(),class:{focused:this.ariaActivedescendant===s.id.toString()},onClick:e=>{this.handleTimeChange(e,s.value);this.showTimes=false;this.timeInput.focus()},role:"option"},`${e?y(s.value):s.value}`))))),!this.showTimes&&this.err&&a("p",{class:"error",id:"email-error"},this.err)))}get el(){return i(this)}static get watchers(){return{time:["timeChangedHandler"],minimumStartTime:["minimumStartTimeChangedHandler"],themeConfig:["themeConfigChangedHandler"]}}};w.style=v;export{x as nylas_date_component,w as nylas_time_window_picker};
-//# sourceMappingURL=p-88e68e14.entry.js.map
+import{r as e,c as s,h as a,a as i,H as t}from"./p-6f5a3998.js";import{r,a as l,i as n,O as o,P as c,F as h,Q as f,R as d,G as y}from"./p-66a89e65.js";import{L as p}from"./p-7e885253.js";import{c as b}from"./p-438d4542.js";const u=':host{display:block;height:auto;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-50:#ffeae8;--nylas-error-100:#ffc5bf;--nylas-error-200:#fecaca;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:"Inter", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff;width:100%}label{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%;flex-direction:column;gap:4px;font-family:var(--nylas-font-family);font-size:16px;color:var(--nylas-base-800)}label.error{color:var(--nylas-error)}label span.required{color:var(--nylas-error);padding:0 0.25rem}label p{margin:0}label .error{color:var(--nylas-error);border-color:var(--nylas-error)}.input_wrapper{display:flex;align-items:center;gap:1rem}input[type=date]{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:100%;width:-moz-available;width:-webkit-fill-available;font-family:var(--nylas-font-family);padding:0 8px;cursor:pointer}input[type=date]:focus{outline-color:var(--nylas-primary)}input[type=date].error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}input[type=date].error::placeholder{font-weight:400}input[type=date]::placeholder{color:var(--nylas-base-300)}input[type=date]::-webkit-calendar-picker-indicator{filter:invert(37%) sepia(51%) saturate(6324%) hue-rotate(215deg) brightness(94%) contrast(95%);cursor:pointer}input:read-only{background-color:var(--nylas-base-100);cursor:not-allowed}';const m=u;const g={date:"YYYY-MM-DD"};const x=class{constructor(a){e(this,a);this.nylasFormInputChanged=s(this,"nylasFormInputChanged",7);this.nylasFormInputFocused=s(this,"nylasFormInputFocused",7);this.nylasFormInputBlurred=s(this,"nylasFormInputBlurred",7);this.name="input";this.defaultValue=undefined;this.label="";this.placeholder=g["date"];this.required=false;this.readOnly=false;this.autoFocus=false;this.pattern=undefined;this.maxLength=255;this.patternError="";this.requiredError="";this.errorMessage="";this.minDate=undefined;this.hasError=false;this.themeConfig=undefined;this.value=undefined;this.error="";this.isDateValid=true}handleDefaultValueChange(e){this.value=r(e);if(this.value){this.validatePattern(this.value,true)}}themeConfigChangedHandler(e,s){if(e===s)return;this.applyThemeConfig(e)}applyThemeConfig(e){if(e){for(const[s,a]of Object.entries(e)){this.el.style.setProperty(`${s}`,a)}}}componentDidLoad(){this.value=r(this.defaultValue||"");if(this.value){this.validatePattern(this.value,true)}this.applyThemeConfig(this.themeConfig)}handleBookingFormSubmitted(e){this.validatePattern(this.value);if(this.error){e.preventDefault()}}async handleFormSubmitted(e){this.validatePattern(this.value);if(this.error){e.preventDefault()}}handleInput(e){this.error="";const s=e.target;this.value=r(s.value);this.isDateValid=s.validity.valid;this.nylasFormInputChanged.emit({value:this.value,name:this.name,label:this.label,error:this.error,type:"date"})}handleBlur(){this.nylasFormInputBlurred.emit({value:this.value,name:this.name})}handleFocus(){this.nylasFormInputFocused.emit({value:this.value,name:this.name})}validatePattern(e,s=false){this.error="";if(!s&&(this.required&&!this.isDateValid||this.minDate&&new Date(this.minDate)>new Date(e))){this.error=this.errorMessage||"Please enter a valid date";this.nylasFormInputChanged.emit({value:this.value,name:this.name,label:this.label,error:this.error,type:"date"});return}if(this.required&&!e){this.error=this.requiredError||"This field is required.";return}if(!this.pattern||!e&&!this.required)return;if(this.pattern.test(e)){this.error=""}else{this.error=this.patternError||"Invalid format."}}render(){return a("label",{key:"19e91d1f34df671a8c3fb97ca4cb9361baccaeb3",part:"ic__label",class:{error:!!this.error||this.hasError}},this.label&&a("p",null,a("span",{class:"label"},this.label),this.required&&a("span",{class:"required"},"*")),a("div",{key:"fd3f370a7469135b82c876938a5c1df1faedfd31",part:"ic__input_wrapper",class:"input_wrapper"},a("input",{key:"a27ac166f7512464ed9e2caf10539ae60e0df92a",type:"date",name:this.name,part:"ic__date",title:this.readOnly?"read-only field":undefined,readOnly:this.readOnly,autoFocus:this.autoFocus,value:this.value,min:this.minDate,maxLength:this.maxLength,placeholder:this.placeholder,class:{error:!!this.error||this.hasError},onInput:e=>this.handleInput(e),onFocus:()=>this.handleFocus(),onBlur:()=>this.handleBlur()}),a("slot",{key:"2d3806006d35fecaa9b48a878eb4216249cdc80f",name:"additional-input"})),this.error&&a("span",{class:"error help-text"},this.error))}get el(){return i(this)}static get watchers(){return{defaultValue:["handleDefaultValueChange"],themeConfig:["themeConfigChangedHandler"]}}};x.style=m;const k=':host{display:block;position:relative;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-50:#ffeae8;--nylas-error-100:#ffc5bf;--nylas-error-200:#fecaca;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:"Inter", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff}.time-picker{display:inline-block;width:150px;font-family:var(--nylas-font-family);position:relative}@media screen and (max-width: 768px){.time-picker{width:auto}}.time-picker input{width:150px;height:48px;text-align:center;font-size:16px;font-family:inherit;color:var(--nylas-base-900);cursor:pointer;background:var(--nylas-base-0);border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}@media screen and (max-width: 768px){.time-picker input{width:88px}}@media screen and (max-width: 504px){.time-picker input{width:68px;font-size:15px}}.time-picker input.focus{background:var(--nylas-base-0)}.time-picker input:hover,.time-picker input:active{border:1px solid var(--nylas-primary)}.time-picker input:active{outline:2px solid var(--nylas-primary)}.time-picker input span.open{transform:rotate(90deg)}.time-picker input span.closed{transform:rotate(270deg)}.time-picker input.error{border:1px solid var(--nylas-error)}.time-picker p.error{color:var(--nylas-error);font-size:0.875rem;margin:0}.times{display:block;margin-top:0.5rem;background-color:var(--nylas-base-0);width:100%;max-height:336px;overflow:auto;border:1px solid #ddd;z-index:1;border-radius:4px;position:absolute;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.0509803922);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1019607843)}.times ul{padding:0;list-style-type:none;color:var(--nylas-base-900);max-height:336px}.times 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:center;cursor:pointer}.times ul li.focused{background-color:var(--nylas-base-100)}.times ul li:hover,.times ul li:focus{background-color:var(--nylas-base-100)}.times ul li label{display:flex;align-items:center;gap:0.5rem}.times ul li label input{margin:0}';const v=k;l.extend(b);const w=class{constructor(a){e(this,a);this.timeChange=s(this,"timeChange",7);this.timeWindowFormError=s(this,"timeWindowFormError",7);this.time=undefined;this.minimumStartTime=null;this.placeholder="hh:mmam/pm";this.name=undefined;this.hasError=false;this.language=p.en;this.themeConfig=undefined;this.err="";this.showTimes=false;this.ariaActivedescendant="";this.times=this.generateTimes();this.shouldAutoScroll=false}handleOutsideClick(e){const s=e.composedPath();const a=s.includes(this.el);if(!a&&this.showTimes){this.showTimes=false}}timeChangedHandler(){this.validateTimeAgainstMinimum()}minimumStartTimeChangedHandler(){this.validateTimeAgainstMinimum()}themeConfigChangedHandler(e,s){this.applyThemeConfig(e)}applyThemeConfig(e){if(e){for(const[s,a]of Object.entries(e)){this.el.style.setProperty(`${s}`,a)}}}validateTimeAgainstMinimum(){if(this.minimumStartTime){const e=l(this.minimumStartTime,"hh:mma");const s=l(this.time,"hh:mma");this.times=this.generateTimes();const a=n.t("nylasTimeWindowPicker.errors.invalid");if(s.isBefore(e)){this.err=a;this.timeWindowFormError.emit({key:this.el.id,message:a})}else{this.err="";this.timeWindowFormError.emit({key:this.el.id,message:""})}}else{this.err="";this.timeWindowFormError.emit({key:this.el.id,message:""})}}componentDidLoad(){this.validateTimeAgainstMinimum();this.applyThemeConfig(this.themeConfig)}componentDidRender(){if(this.showTimes&&this.shouldAutoScroll){const e=o(this.time);const s=this.times.findIndex((s=>s.value===e));if(s>-1){this.shouldAutoScroll=false;this.scrollToViewWithinParent(s)}return}}handleTimeChange(e,s){const a=s.split(":");if(a[0]==="00"&&a[1].slice(-2)=="pm"){const e=n.t("nylasTimeWindowPicker.errors.invalid");this.err=e;this.timeWindowFormError.emit({key:this.el.id,message:e})}if(!c(s)){const e=n.t("nylasTimeWindowPicker.errors.invalid");this.err=e;this.timeWindowFormError.emit({key:this.el.id,message:e})}else{this.err="";this.timeWindowFormError.emit({key:this.el.id,message:""})}if(this.err){return}this.timeChange.emit({key:this.el.id,value:s})}handleTimeAutocomplete(e){const s=e.target?.value;const a=this.language!==p.en?h(s):s;const i=n.t("nylasTimeWindowPicker.errors.invalid");if(!c(a)){this.err=i;this.timeWindowFormError.emit({key:this.el.id,message:i});return}if(a===""){const e=f().format("hh:mma");this.timeChange.emit({key:this.el.id,value:e});return}if(!d(a)){const e=o(a);this.timeChange.emit({key:this.el.id,value:e});return}this.timeChange.emit({key:this.el.id,value:a})}handleOnInput(e){const s=e.target?.value;if(!c(s)){return}if(s===""){const e=f().format("hh:mma");const s=this.times.findIndex((s=>s.value===e));if(s>-1){this.scrollToViewWithinParent(s)}return}if(!d(s)){const e=o(s);const a=this.times.findIndex((s=>s.value===e));if(a>-1){this.scrollToViewWithinParent(a)}return}}generateTimes(){const e=[];let s=l().set("hour",0).set("minute",0).set("second",0);if(this.minimumStartTime){s=l(this.minimumStartTime,"hh:mma")}const a=s.endOf("day").diff(s,"minutes");const i=Math.round(a/15);for(let a=0;a<i+1;a++){const t=s.add(a*15,"minute");if(a==i&&t.format("hh:mma").includes("am")){break}e.push({id:a,value:t.format("hh:mma")})}return e}handleComboboxKeyDown(e){if(e.key==="ArrowDown"){e.preventDefault();if(!this.showTimes){this.showTimes=true;this.shouldAutoScroll=true;return}if(this.ariaActivedescendant===""){this.ariaActivedescendant=this.times[0].id.toString();this.focusOption(0)}else{const e=this.times.findIndex((e=>e.id.toString()===this.ariaActivedescendant));const s=e+1<this.times.length?e+1:0;this.ariaActivedescendant=this.times[s].id.toString();this.focusOption(s)}}else if(e.key==="ArrowUp"){e.preventDefault();if(this.ariaActivedescendant===""){this.ariaActivedescendant=this.times[this.times.length-1].id.toString();this.focusOption(this.times.length-1)}else{const e=this.times.findIndex((e=>e.id.toString()===this.ariaActivedescendant));const s=e-1>=0?e-1:this.times.length-1;this.ariaActivedescendant=this.times[s].id.toString();this.focusOption(s)}}else if(e.key==="Escape"){this.showTimes=false;this.timeInput.focus()}}handleListboxKeydown(e){const s=this.times;const a=s.findIndex((e=>e.id.toString()===this.ariaActivedescendant));if(e.key==="ArrowDown"||e.key==="Tab"&&!e.shiftKey){e.preventDefault();const i=a+1<s.length?a+1:0;this.ariaActivedescendant=s[i].id.toString();this.focusOption(i)}else if(e.key==="ArrowUp"||e.key==="Tab"&&e.shiftKey){e.preventDefault();const i=a-1>=0?a-1:s.length-1;this.ariaActivedescendant=s[i].id.toString();this.focusOption(i)}else if(e.key==="Enter"){e.preventDefault();if(this.ariaActivedescendant){const i=s[a];this.handleTimeChange(e,i.value);this.showTimes=false;this.ariaActivedescendant="";this.timeInput.focus()}}else if(e.key==="Escape"){this.showTimes=false;this.timeInput.focus()}}scrollToViewWithinParent(e){const s=this.times[e];const a=this.el.shadowRoot?.getElementById(s.id.toString());const i=this.timeMenu;this.ariaActivedescendant=s.id.toString();const t=a.getBoundingClientRect();const r=i.getBoundingClientRect();if(t.top<r.top){i.scrollTop-=r.top-t.top}else if(t.bottom>r.bottom){i.scrollTop+=t.bottom-r.bottom}if(t.left<r.left){i.scrollLeft-=r.left-t.left}else if(t.right>r.right){i.scrollLeft+=t.right-r.right}}focusOption(e){const s=this.times[e];if(!s)return;const a=s.id.toString();const i=this.el.shadowRoot?.getElementById(a);if(i){i.focus();i.scrollIntoView({behavior:"smooth",block:"nearest"})}}render(){const e=this.language===p.en?false:true;return a(t,{key:"748ab1dcf12c2e1284ca11883dcaade689d3150f"},a("div",{key:"77369574660ea9e48f8ed77c4b4cc51cf328690a",class:"time-picker",part:"time-picker"},a("input",{key:"09fd3119ae7763a492068860d9a20ed06e1bf0ac",type:"text",name:this.name,id:this.name,part:"time-input",class:{"time-input":true,error:!!this.err||this.hasError},ref:e=>this.timeInput=e,value:e?y(this.time):this.time,onClick:()=>{this.showTimes=!this.showTimes;this.shouldAutoScroll=true},"aria-haspopup":"listbox","aria-label":this.name,"aria-expanded":this.showTimes?"true":"false",placeholder:this.placeholder,onKeyDown:e=>this.handleComboboxKeyDown(e),onInput:e=>this.handleOnInput(e),onBlur:e=>this.handleTimeAutocomplete(e)}),this.err&&a("div",{class:"invalid-time-icon"}),this.showTimes&&a("div",{class:"times",part:"times",ref:e=>this.timeMenu=e},a("ul",{tabindex:"-1",role:"listbox","aria-label":this.name,"aria-activedescendant":this.ariaActivedescendant,onKeyDown:e=>this.handleListboxKeydown(e)},this.times.map((s=>a("li",{tabindex:"0",key:s.id,id:s.id.toString(),class:{focused:this.ariaActivedescendant===s.id.toString()},onClick:e=>{this.handleTimeChange(e,s.value);this.showTimes=false;this.timeInput.focus()},role:"option"},`${e?y(s.value):s.value}`))))),!this.showTimes&&this.err&&a("p",{class:"error",id:"email-error"},this.err)))}get el(){return i(this)}static get watchers(){return{time:["timeChangedHandler"],minimumStartTime:["minimumStartTimeChangedHandler"],themeConfig:["themeConfigChangedHandler"]}}};w.style=v;export{x as nylas_date_component,w as nylas_time_window_picker};
+//# sourceMappingURL=p-6adb19cf.entry.js.map