@nylas/web-elements 2.2.3 → 2.2.4

package/dist/nylas-web-elements/{p-2b2206aa.entry.js → p-2a10c747.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as a,h as s,a as l}from"./p-0EQQA0nE.js";import{n as r}from"./p-DnxlJ1jl.js";const t=':host{display:block;height:auto;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-50:#ffeae8;--nylas-error-100:#ffc5bf;--nylas-error-200:#fecaca;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:"Inter", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff;width:100%}label{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%;flex-direction:column;gap:4px;font-family:var(--nylas-font-family);font-size:16px;color:var(--nylas-base-800)}label.error{color:var(--nylas-error)}label span.required{color:var(--nylas-error);padding:0 0.25rem}label p{margin:0}label .error{color:var(--nylas-error)}.input_wrapper{display:flex;align-items:center;gap:1rem}input[type=text],input[type=number],input[type=email],input[type=phone_number]{display:flex;height:48px;padding-left:16px;align-items:center;gap:8px;align-self:stretch;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-300);background:var(--nylas-base-0);width:-webkit-fill-available;color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:400;line-height:150%;width:-moz-available;width:-webkit-fill-available}input[type=text]:focus,input[type=number]:focus,input[type=email]:focus,input[type=phone_number]:focus{outline-color:var(--nylas-primary)}input[type=text].error,input[type=number].error,input[type=email].error,input[type=phone_number].error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}input[type=text].error::placeholder,input[type=number].error::placeholder,input[type=email].error::placeholder,input[type=phone_number].error::placeholder{font-weight:400}input[type=text]::placeholder,input[type=number]::placeholder,input[type=email]::placeholder,input[type=phone_number]::placeholder{color:var(--nylas-base-300)}input:read-only{background-color:var(--nylas-base-100);cursor:not-allowed}';const n={email:/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,phone_number:/^\+?\d{1,15}$/};const i={email:"name@example.com",phone_number:"1234567890"};const o=class{constructor(s){e(this,s);this.nylasFormInputChanged=a(this,"nylasFormInputChanged",7);this.nylasFormInputFocused=a(this,"nylasFormInputFocused",7);this.nylasFormInputBlurred=a(this,"nylasFormInputBlurred",7);this.name="input";this.label="";this.type="text";this.placeholder=i[this.type];this.required=false;this.readOnly=false;this.autoFocus=false;this.maxLength=255;this.patternError="";this.requiredError="";this.error=""}handleDefaultValueChange(e){this.value=r(e);if(this.value){this.validatePattern(this.value)}}themeConfigChangedHandler(e,a){if(e===a)return;this.applyThemeConfig(e)}applyThemeConfig(e){if(e){for(const[a,s]of Object.entries(e)){this.el.style.setProperty(`${a}`,s)}}}componentWillLoad(){this.applyThemeConfig(this.themeConfig)}componentDidLoad(){this.value=r(this.defaultValue||"");if(this.type!=="text"&&!this.pattern){this.pattern=n[this.type]}if(this.value){this.validatePattern(this.value)}this.applyThemeConfig(this.themeConfig)}handleBookingFormSubmitted(e){this.validatePattern(this.value);if(this.error){e.preventDefault()}}async handleFormSubmitted(e){if(this.el?.getAttribute("data-page-styling")){this.validatePattern(this.value);if(this.error){e.preventDefault()}}}handleInput(e){this.error="";const a=e.target.value;if(this.type==="number"){const e=parseFloat(a);if(this.maxValue!==undefined&&e>this.maxValue||this.minValue!==undefined&&e<this.minValue){if(this.minValue===undefined){this.error=`Value must be less than ${this.maxValue}`}else if(this.maxValue===undefined){this.error=`Value must be greater than ${this.minValue}`}else{this.error=`Value must be between ${this.minValue} and ${this.maxValue}`}}else if(isNaN(e)){this.error=this.patternError||"Invalid format."}}this.value=r(a);this.nylasFormInputChanged.emit({value:this.value,name:this.name,label:this.label,error:this.error,type:this.type})}handleBlur(){this.nylasFormInputBlurred.emit({value:this.value,name:this.name})}handleFocus(){this.nylasFormInputFocused.emit({value:this.value,name:this.name})}validatePattern(e){this.error="";if(this.required&&!e){this.error=this.requiredError||"This field is required.";return}if(this.type==="number"&&e){const a=parseFloat(e);if(this.maxValue!==undefined&&a>this.maxValue||this.minValue!==undefined&&a<this.minValue){this.error=`Value must be between ${this.minValue} and ${this.maxValue}`;return}}if(this.pattern&&e&&!this.pattern.test(e)){this.error=this.patternError||"Invalid format."}}render(){return s("label",{key:"7612c93c8722edbe354bb7e42e58cdeb1513884d",part:this.error?"ic__label ic__label--error":"ic__label",class:{error:!!this.error}},this.label&&s("p",{key:"72d53b9424bdcd94c45b933d622fa60b76748174"},s("span",{key:"09caecb72a7f77300d98e1605455b20d67091dfc",class:"label"},this.label),this.required&&s("span",{key:"0e4e68eb36344d66119dd1d2068f5a350f0500b8",class:"required"},"*")),s("div",{key:"916210365d854f15b94093bd84abf10a149330c2",part:"ic__input_wrapper",class:"input_wrapper"},s("input",{key:"fb665d3bb79020aabca6264a8e73568536cfbe64",type:this.type,name:this.name,part:this.error?"ic__input ic__input--error":"ic__input",title:this.readOnly?"read-only field":undefined,readOnly:this.readOnly,autoFocus:this.autoFocus,value:this.value,maxLength:this.maxLength,max:this.type==="number"?this.maxValue:undefined,min:this.type==="number"?this.minValue:undefined,placeholder:this.placeholder,class:{error:!!this.error},onInput:e=>this.handleInput(e),onFocus:()=>this.handleFocus(),onBlur:()=>this.handleBlur()}),s("slot",{key:"b306170abc13683640a7ff1255b16f4f530f937b",name:"additional-input"})),this.error&&s("span",{key:"b18f95eeab229474709fbe96494777b8a7e7093a",class:"error help-text",part:"ic__error_message"},this.error))}get el(){return l(this)}static get watchers(){return{defaultValue:["handleDefaultValueChange"],themeConfig:["themeConfigChangedHandler"]}}};o.style=t;export{o as input_component};
-//# sourceMappingURL=p-2b2206aa.entry.js.map
+import{r as e,c as a,h as s,a as l}from"./p-0EQQA0nE.js";import{n as r}from"./p-C_2w_vhw.js";const t=':host{display:block;height:auto;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-50:#ffeae8;--nylas-error-100:#ffc5bf;--nylas-error-200:#fecaca;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:"Inter", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff;width:100%}label{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%;flex-direction:column;gap:4px;font-family:var(--nylas-font-family);font-size:16px;color:var(--nylas-base-800)}label.error{color:var(--nylas-error)}label span.required{color:var(--nylas-error);padding:0 0.25rem}label p{margin:0}label .error{color:var(--nylas-error)}.input_wrapper{display:flex;align-items:center;gap:1rem}input[type=text],input[type=number],input[type=email],input[type=phone_number]{display:flex;height:48px;padding-left:16px;align-items:center;gap:8px;align-self:stretch;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-300);background:var(--nylas-base-0);width:-webkit-fill-available;color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:400;line-height:150%;width:-moz-available;width:-webkit-fill-available}input[type=text]:focus,input[type=number]:focus,input[type=email]:focus,input[type=phone_number]:focus{outline-color:var(--nylas-primary)}input[type=text].error,input[type=number].error,input[type=email].error,input[type=phone_number].error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}input[type=text].error::placeholder,input[type=number].error::placeholder,input[type=email].error::placeholder,input[type=phone_number].error::placeholder{font-weight:400}input[type=text]::placeholder,input[type=number]::placeholder,input[type=email]::placeholder,input[type=phone_number]::placeholder{color:var(--nylas-base-300)}input:read-only{background-color:var(--nylas-base-100);cursor:not-allowed}';const n={email:/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,phone_number:/^\+?\d{1,15}$/};const i={email:"name@example.com",phone_number:"1234567890"};const o=class{constructor(s){e(this,s);this.nylasFormInputChanged=a(this,"nylasFormInputChanged",7);this.nylasFormInputFocused=a(this,"nylasFormInputFocused",7);this.nylasFormInputBlurred=a(this,"nylasFormInputBlurred",7);this.name="input";this.label="";this.type="text";this.placeholder=i[this.type];this.required=false;this.readOnly=false;this.autoFocus=false;this.maxLength=255;this.patternError="";this.requiredError="";this.error=""}handleDefaultValueChange(e){this.value=r(e);if(this.value){this.validatePattern(this.value)}}themeConfigChangedHandler(e,a){if(e===a)return;this.applyThemeConfig(e)}applyThemeConfig(e){if(e){for(const[a,s]of Object.entries(e)){this.el.style.setProperty(`${a}`,s)}}}componentWillLoad(){this.applyThemeConfig(this.themeConfig)}componentDidLoad(){this.value=r(this.defaultValue||"");if(this.type!=="text"&&!this.pattern){this.pattern=n[this.type]}if(this.value){this.validatePattern(this.value)}this.applyThemeConfig(this.themeConfig)}handleBookingFormSubmitted(e){this.validatePattern(this.value);if(this.error){e.preventDefault()}}async handleFormSubmitted(e){if(this.el?.getAttribute("data-page-styling")){this.validatePattern(this.value);if(this.error){e.preventDefault()}}}handleInput(e){this.error="";const a=e.target.value;if(this.type==="number"){const e=parseFloat(a);if(this.maxValue!==undefined&&e>this.maxValue||this.minValue!==undefined&&e<this.minValue){if(this.minValue===undefined){this.error=`Value must be less than ${this.maxValue}`}else if(this.maxValue===undefined){this.error=`Value must be greater than ${this.minValue}`}else{this.error=`Value must be between ${this.minValue} and ${this.maxValue}`}}else if(isNaN(e)){this.error=this.patternError||"Invalid format."}}this.value=r(a);this.nylasFormInputChanged.emit({value:this.value,name:this.name,label:this.label,error:this.error,type:this.type})}handleBlur(){this.nylasFormInputBlurred.emit({value:this.value,name:this.name})}handleFocus(){this.nylasFormInputFocused.emit({value:this.value,name:this.name})}validatePattern(e){this.error="";if(this.required&&!e){this.error=this.requiredError||"This field is required.";return}if(this.type==="number"&&e){const a=parseFloat(e);if(this.maxValue!==undefined&&a>this.maxValue||this.minValue!==undefined&&a<this.minValue){this.error=`Value must be between ${this.minValue} and ${this.maxValue}`;return}}if(this.pattern&&e&&!this.pattern.test(e)){this.error=this.patternError||"Invalid format."}}render(){return s("label",{key:"7612c93c8722edbe354bb7e42e58cdeb1513884d",part:this.error?"ic__label ic__label--error":"ic__label",class:{error:!!this.error}},this.label&&s("p",{key:"72d53b9424bdcd94c45b933d622fa60b76748174"},s("span",{key:"09caecb72a7f77300d98e1605455b20d67091dfc",class:"label"},this.label),this.required&&s("span",{key:"0e4e68eb36344d66119dd1d2068f5a350f0500b8",class:"required"},"*")),s("div",{key:"916210365d854f15b94093bd84abf10a149330c2",part:"ic__input_wrapper",class:"input_wrapper"},s("input",{key:"fb665d3bb79020aabca6264a8e73568536cfbe64",type:this.type,name:this.name,part:this.error?"ic__input ic__input--error":"ic__input",title:this.readOnly?"read-only field":undefined,readOnly:this.readOnly,autoFocus:this.autoFocus,value:this.value,maxLength:this.maxLength,max:this.type==="number"?this.maxValue:undefined,min:this.type==="number"?this.minValue:undefined,placeholder:this.placeholder,class:{error:!!this.error},onInput:e=>this.handleInput(e),onFocus:()=>this.handleFocus(),onBlur:()=>this.handleBlur()}),s("slot",{key:"b306170abc13683640a7ff1255b16f4f530f937b",name:"additional-input"})),this.error&&s("span",{key:"b18f95eeab229474709fbe96494777b8a7e7093a",class:"error help-text",part:"ic__error_message"},this.error))}get el(){return l(this)}static get watchers(){return{defaultValue:["handleDefaultValueChange"],themeConfig:["themeConfigChangedHandler"]}}};o.style=t;export{o as input_component};
+//# sourceMappingURL=p-2a10c747.entry.js.map