@descope/web-components-ui 1.0.409 → 1.0.411

package/dist/umd/phone-fields-descope-phone-field-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[9894,2878],{69473:(t,e,n)=>{n.d(e,{T:()=>a,w:()=>u});var i=n(94619),o=n(93826),r=n(7138),l=n(14944),s=n(33177);const a=(0,l.xE)("text-field"),p=["type","label-type","copy-to-clipboard"],u=(0,r.Zz)((0,i.RF)({mappings:o.A}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),i.tQ,(t=>class extends t{static get observedAttributes(){return p.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},n={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,n),setTimeout((()=>{Object.assign(this.icon,e)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}}))((0,i.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${u.cssVarList.inputOutlineWidth}) + var(${u.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,s.$J)("vaadin-text-field")}\n\t\t\t${(0,s.cy)(u.cssVarList)}\n\t\t\t${(0,s.LJ)("vaadin-text-field",u.cssVarList)}\n      ${(0,s.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:a}))},89348:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>i.w}),n(39542),n(66418),n(56637);var i=n(69473);customElements.define(i.T,i.w)},32413:(t,e,n)=>{n.d(e,{A:()=>y,T:()=>s});var i=n(25827),o=n(14944),r=n(44066),l=n(41611);const s=(0,o.xE)("phone-field-internal"),a=["disabled","size","bordered","readonly","allow-alphanumeric-input"],p=["country-input-placeholder","default-code","restrict-countries"],u=["phone-input-placeholder","maxlength","autocomplete","name"],d=["label-type","country-input-label","label"],c={"country-input-label":"label","country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},h=[].concat(a,p,u,d),b=(0,i.y)({componentName:s,baseSelector:"div"}),y=class extends b{static get observedAttributes(){return[].concat(b.observedAttributes||[],h)}constructor(){super(),this.innerHTML=`\n    <div class="wrapper">\n      <descope-combo-box\n        item-label-path="data-name"\n        item-value-path="data-id"\n      >\n      ${r.A.map((t=>(0,l.$B)(t))).join("")}\n      </descope-combo-box>\n      <div class="separator"></div>\n      <descope-text-field type="tel"></descope-text-field>\n    </div>\n    `,this.countryCodeInput=this.querySelector("descope-combo-box"),this.phoneNumberInput=this.querySelector("descope-text-field"),this.inputs=[this.countryCodeInput,this.phoneNumberInput],(0,o.EA)(this,this.countryCodeInput,{includeAttrs:["label-type"]}),(0,o.EA)(this,this.phoneNumberInput,{includeAttrs:["label-type","required"]}),this.countryCodeInput.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get countryCodeInputData(){return this.countryCodeInput.items}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get value(){return this.phoneNumberValue?`${this.countryCodeInput.value}-${this.phoneNumberInput.value}`:""}set value(t){const[e,n]=(0,l.lq)(t);this.#t(e),this.#e(n)}setSelectionRange(...t){this.phoneNumberInput.setSelectionRange(...t)}get selectionStart(){return this.phoneNumberInput.selectionStart}#t(t){if(t){const e=this.getCountryByDialCode(t);e&&(this.countryCodeInput.selectedItem=e)}else this.countryCodeInput.selectedItem=void 0}#e(t){this.phoneNumberInput.value!==t&&(this.phoneNumberInput.value=t)}get phoneNumberValue(){return this.phoneNumberInput.value}get countryCodeValue(){return this.countryCodeInput.shadowRoot.querySelector("input").value}get phoneNumberInputEle(){return this.phoneNumberInput.shadowRoot.querySelector("input")}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}getValidity(){const t=this.countryCodeInput.value,e=this.phoneNumberInput.value,n=!t||!e,i=this.phoneNumberInput.value?.length&&this.phoneNumberInput.value.length<this.minLength;return this.isRequired&&n?{valueMissing:!0}:i?{tooShort:!0}:e&&!t?{valueMissing:!0}:{}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[1].focus()})),super.init?.(),this.initInputs()}getRestrictedCountries(){const t=this.getAttribute("restrict-countries");return t?t.split(","):[]}getCountryByDialCode(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-id")===t))}getCountryByCodeId(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}updateCountryCodeItems(t){const e=t.length?r.A.filter((e=>t.includes(e.code))):r.A;this.querySelector("descope-combo-box").innerHTML=e.map((t=>(0,l.$B)(t))).join("")}handleDefaultCountryCode(t){if(!this.countryCodeInput.value){const e=this.getCountryByCodeId(t);e&&setTimeout((()=>{this.countryCodeInput.selectedItem=e}))}}initInputs(){this.phoneNumberInput.addEventListener("input",(t=>{if(!this.allowAlphanumericInput){const e=/^\d$/,n=t.target.value.split("").filter((t=>e.test(t))).join("");t.target.value=n}})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}handleLabelTypeAttrs(t,e){const n=c[t]||t;"label-type"===t?this.onLabelTypeChange(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.countryCodeInput.setAttribute(n,e):"label"===t&&this.phoneNumberInput.setAttribute(n,e))}onLabelTypeChange(t){"floating"===t?(this.countryCodeInput.setAttribute("label",this.getAttribute("country-input-label")||""),this.countryCodeInput.setAttribute("placeholder",this.getAttribute("country-input-placeholder")||""),this.phoneNumberInput.setAttribute("label",this.getAttribute("label")||""),this.phoneNumberInput.setAttribute("placeholder",this.getAttribute("phone-input-placeholder")||"")):this.inputs.forEach((t=>t.removeAttribute("label")))}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n){if("default-code"===t&&n)this.handleDefaultCountryCode(n);else if(h.includes(t)){const e=c[t]||t;a.includes(t)?this.inputs.forEach((t=>t.setAttribute(e,n))):p.includes(t)?this.countryCodeInput.setAttribute(e,n):u.includes(t)&&this.phoneNumberInput.setAttribute(e,n)}d.includes(t)&&this.handleLabelTypeAttrs(t,n),"restrict-countries"===t&&this.updateCountryCodeItems(this.getRestrictedCountries())}}}},54930:(t,e,n)=>{n.r(e),n(4480),n(89348);var i=n(32413);customElements.define(i.T,i.A)},41611:(t,e,n)=>{n.d(e,{$B:()=>o,lq:()=>r});var i=n(11211);const o=({code:t,dialCode:e,name:n})=>`\n\t<div\n\t\tstyle="display:flex; flex-direction: column;"\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${n}"\n\t\tdata-country-code="${t}"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src="${(t=>`https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${t.toLowerCase()}.svg`)(t)}" width="20"/>\n\t\t\t</span>\n\t\t\t<span>${n}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${t}</span>\n\t\t\t<span>${e}</span>\n\t\t</div>\n\t</div>\n`,r=t=>{const e=t||"";let n="",o="";const r=(0,i.l)(e);if(r)r.countryCallingCode&&(n=`+${r.countryCallingCode}`),r.nationalNumber&&(o=r.nationalNumber);else{const[t,i]=e.split("-");n=t||"",o=i||""}return[n,o]}},18638:(t,e,n)=>{n.r(e),n.d(e,{PhoneFieldClass:()=>A}),n(54930),n(4480),n(89348);var i=n(32413),o=n(14944),r=n(7138),l=n(94619),s=n(69473),a=n(78313),p=n(44066),u=n(33177);const d=s.w.cssVarList,c=a.C.cssVarList,h=(0,o.xE)("phone-field"),{host:b,label:y,requiredIndicator:m,inputField:f,internalAfter:g,countryCodeInput:C,phoneInput:v,separator:x,errorMessage:I,helperText:w}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},internalAfter:{selector:"descope-phone-field-internal::after"},phoneInput:{selector:()=>"descope-text-field"},countryCodeInput:{selector:()=>"descope-combo-box"},separator:{selector:"descope-phone-field-internal .separator"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},A=(0,r.Zz)((0,l.RF)({mappings:{fontSize:[b,f,{selector:s.w.componentName,property:s.w.cssVarList.fontSize},{selector:a.C.componentName,property:a.C.cssVarList.fontSize}],fontFamily:[y,I,w,{...C,property:a.C.cssVarList.overlay.fontFamily}],hostWidth:[{...b,property:"width"},{...v,property:"width"},{...C,property:"--vaadin-combo-box-overlay-width"}],hostDirection:{...b,property:"direction"},inputBorderStyle:[{...g,property:"outline-style"},{...x,property:"border-left-style"}],inputBorderWidth:[{...g,property:"outline-width"},{...x,property:"border-left-width"}],inputBorderColor:[{...g,property:"outline-color"},{...x,property:"border-left-color"}],inputBorderRadius:[{...f,property:"border-radius"},{...g,property:"border-radius"}],countryCodeInputWidth:{...C,property:c.hostWidth},countryCodeDropdownWidth:{...C,property:"--vaadin-combo-box-overlay-width"},phoneInputWidth:{...v,property:"width"},horizontalPadding:[{...v,property:"padding-left"},{...v,property:"padding-right"},{...C,property:"padding-left"},{...C,property:"padding-right"}],labelTextColor:[{...y,property:"color"},{...m,property:"color"}],labelRequiredIndicator:{...m,property:"content"},errorMessageTextColor:{...I,property:"color"},inputValueTextColor:[{...v,property:d.inputValueTextColor},{...C,property:c.inputValueTextColor}],inputPlaceholderTextColor:{...v,property:d.inputPlaceholderColor},overlayItemBackgroundColor:{selector:"descope-combo-box",property:c.overlayItemBackgroundColor},inputOutlineStyle:{...f,property:"outline-style"},inputOutlineColor:{...f,property:"outline-color"},inputOutlineWidth:{...f,property:"outline-width"},inputOutlineOffset:{...f,property:"outline-offset"},valueInputHeight:[{...C,property:c.valueInputHeight}],valueInputMarginBottom:[{...v,property:d.valueInputMarginBottom}],marginInlineStart:[{...v,property:d.marginInlineStart},{...C,property:c.marginInlineStart}]}}),l.VO,(0,l.OZ)({proxyProps:["value","selectionStart"]}),(t=>class extends t{static get CountryCodes(){return p.A}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${i.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${i.T}>\n      \t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(i.T),(0,o.EA)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","invalid","minlength","maxlength","default-code","country-input-placeholder","phone-input-placeholder","disabled","restrict-countries","country-input-label","readonly","label","label-type","allow-alphanumeric-input"]})}get countryCodeItems(){return this.inputElement?.countryCodeValue}get phoneNumberInputEle(){return this.inputElement?.phoneNumberInputEle}get countryCodeInputData(){return this.inputElement?.countryCodeInputData}get countryCodes(){return Array.from(this.inputElement.countryCodeInputData).map((t=>t.getAttribute("data-country-code")))}}))((0,l.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 15em;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\t${(0,u.cy)(A.cssVarList)}\n\t\t\t${(0,u.I4)("vaadin-text-field")}\n\t\t\t${(0,u.kG)("vaadin-text-field")}\n\t\t\t${(0,u.X6)()}\n\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\t\t\tvaadin-text-field::part(label) {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n        direction: ltr;\n        position: relative;\n\t\t\t}\n      descope-phone-field-internal::after {\n        content: '';\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        top: 0;\n        left: 0;\n        box-sizing: border-box;\n        outline-offset: calc(var(${A.cssVarList.inputBorderWidth}) * -1);\n        pointer-events: none;\n      }\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n        min-width: 5.75em;\n\t\t\t\t${c.inputOutlineWidth}: 0;\n\t\t\t\t${c.inputOutlineOffset}: 0;\n\t\t\t\t${c.inputBorderWidth}: 0;\n\t\t\t\t${c.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${d.inputOutlineWidth}: 0;\n\t\t\t\t${d.inputOutlineOffset}: 0;\n\t\t\t\t${d.inputBorderWidth}: 0;\n\t\t\t\t${d.inputBorderRadius}: 0;\n      }\n\n      :host([label-type="floating"]) vaadin-text-field::part(label) {\n        display: none;\n      }\n      descope-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      descope-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n      ${(0,u.$J)("vaadin-text-field")}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:h}));customElements.define(h,A)}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[9894,2878],{89348:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>o.w}),n(39542),n(40481),n(96206);var o=n(69473);customElements.define(o.T,o.w)},23758:(t,e,n)=>{n.d(e,{NF:()=>A,TQ:()=>h});var o=n(32413),r=n(14944),i=n(7138),l=n(94619),p=n(69473),s=n(78313),a=n(44066),u=n(33177);const d=p.w.cssVarList,c=s.C.cssVarList,h=(0,r.xE)("phone-field"),{host:y,label:b,requiredIndicator:m,inputField:g,internalAfter:f,countryCodeInput:C,phoneInput:I,separator:v,errorMessage:x,helperText:w}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},internalAfter:{selector:"descope-phone-field-internal::after"},phoneInput:{selector:()=>"descope-text-field"},countryCodeInput:{selector:()=>"descope-combo-box"},separator:{selector:"descope-phone-field-internal .separator"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},A=(0,i.Zz)((0,l.RF)({mappings:{fontSize:[y,g,{selector:p.w.componentName,property:p.w.cssVarList.fontSize},{selector:s.C.componentName,property:s.C.cssVarList.fontSize}],fontFamily:[b,x,w,{...C,property:s.C.cssVarList.overlay.fontFamily}],hostWidth:[{...y,property:"width"},{...I,property:"width"},{...C,property:"--vaadin-combo-box-overlay-width"}],hostDirection:{...y,property:"direction"},inputBorderStyle:[{...f,property:"outline-style"},{...v,property:"border-left-style"}],inputBorderWidth:[{...f,property:"outline-width"},{...v,property:"border-left-width"}],inputBorderColor:[{...f,property:"outline-color"},{...v,property:"border-left-color"}],inputBorderRadius:[{...g,property:"border-radius"},{...f,property:"border-radius"}],countryCodeInputWidth:{...C,property:c.hostWidth},countryCodeDropdownWidth:{...C,property:"--vaadin-combo-box-overlay-width"},phoneInputWidth:{...I,property:"width"},horizontalPadding:[{...I,property:"padding-left"},{...I,property:"padding-right"},{...C,property:"padding-left"},{...C,property:"padding-right"}],labelTextColor:[{...b,property:"color"},{...m,property:"color"}],labelRequiredIndicator:{...m,property:"content"},errorMessageTextColor:{...x,property:"color"},errorMessageIcon:{...x,property:"background-image"},errorMessageIconSize:{...x,property:"background-size"},errorMessageIconPadding:{...x,property:"padding-inline-start"},errorMessageIconRepeat:{...x,property:"background-repeat"},errorMessageIconPosition:{...x,property:"background-position"},inputValueTextColor:[{...I,property:d.inputValueTextColor},{...C,property:c.inputValueTextColor}],inputPlaceholderTextColor:{...I,property:d.inputPlaceholderColor},overlayItemBackgroundColor:{selector:"descope-combo-box",property:c.overlayItemBackgroundColor},inputOutlineStyle:{...g,property:"outline-style"},inputOutlineColor:{...g,property:"outline-color"},inputOutlineWidth:{...g,property:"outline-width"},inputOutlineOffset:{...g,property:"outline-offset"},valueInputHeight:[{...C,property:c.valueInputHeight}],valueInputMarginBottom:[{...I,property:d.valueInputMarginBottom}],marginInlineStart:[{...I,property:d.marginInlineStart},{...C,property:c.marginInlineStart}]}}),l.VO,(0,l.OZ)({proxyProps:["value","selectionStart"]}),(t=>class extends t{static get CountryCodes(){return a.A}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${o.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${o.T}>\n      \t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.T),(0,r.EA)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","invalid","minlength","maxlength","default-code","country-input-placeholder","phone-input-placeholder","disabled","restrict-countries","country-input-label","readonly","label","label-type","allow-alphanumeric-input"]})}get countryCodeItems(){return this.inputElement?.countryCodeValue}get phoneNumberInputEle(){return this.inputElement?.phoneNumberInputEle}get countryCodeInputData(){return this.inputElement?.countryCodeInputData}get countryCodes(){return Array.from(this.inputElement.countryCodeInputData).map((t=>t.getAttribute("data-country-code")))}}))((0,l.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 15em;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\t${(0,u.cy)(A.cssVarList)}\n\t\t\t${(0,u.I4)("vaadin-text-field")}\n\t\t\t${(0,u.kG)("vaadin-text-field")}\n\t\t\t${(0,u.X6)()}\n\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\t\t\tvaadin-text-field::part(label) {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n        direction: ltr;\n        position: relative;\n\t\t\t}\n      descope-phone-field-internal::after {\n        content: '';\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        top: 0;\n        left: 0;\n        box-sizing: border-box;\n        outline-offset: calc(var(${A.cssVarList.inputBorderWidth}) * -1);\n        pointer-events: none;\n      }\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n        min-width: 5.75em;\n\t\t\t\t${c.inputOutlineWidth}: 0;\n\t\t\t\t${c.inputOutlineOffset}: 0;\n\t\t\t\t${c.inputBorderWidth}: 0;\n\t\t\t\t${c.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${d.inputOutlineWidth}: 0;\n\t\t\t\t${d.inputOutlineOffset}: 0;\n\t\t\t\t${d.inputBorderWidth}: 0;\n\t\t\t\t${d.inputBorderRadius}: 0;\n      }\n\n      :host([label-type="floating"]) vaadin-text-field::part(label) {\n        display: none;\n      }\n      descope-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      descope-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n      ${(0,u.$J)("vaadin-text-field")}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:h}))},32413:(t,e,n)=>{n.d(e,{A:()=>b,T:()=>p});var o=n(25827),r=n(14944),i=n(44066),l=n(41611);const p=(0,r.xE)("phone-field-internal"),s=["disabled","size","bordered","readonly","allow-alphanumeric-input"],a=["country-input-placeholder","default-code","restrict-countries"],u=["phone-input-placeholder","maxlength","autocomplete","name"],d=["label-type","country-input-label","label"],c={"country-input-label":"label","country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},h=[].concat(s,a,u,d),y=(0,o.y)({componentName:p,baseSelector:"div"}),b=class extends y{static get observedAttributes(){return[].concat(y.observedAttributes||[],h)}constructor(){super(),this.innerHTML=`\n    <div class="wrapper">\n      <descope-combo-box\n        item-label-path="data-name"\n        item-value-path="data-id"\n      >\n      ${i.A.map((t=>(0,l.$B)(t))).join("")}\n      </descope-combo-box>\n      <div class="separator"></div>\n      <descope-text-field type="tel"></descope-text-field>\n    </div>\n    `,this.countryCodeInput=this.querySelector("descope-combo-box"),this.phoneNumberInput=this.querySelector("descope-text-field"),this.inputs=[this.countryCodeInput,this.phoneNumberInput],(0,r.EA)(this,this.countryCodeInput,{includeAttrs:["label-type"]}),(0,r.EA)(this,this.phoneNumberInput,{includeAttrs:["label-type","required"]}),this.countryCodeInput.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get countryCodeInputData(){return this.countryCodeInput.items}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get value(){return this.phoneNumberValue?`${this.countryCodeInput.value}-${this.phoneNumberInput.value}`:""}set value(t){const[e,n]=(0,l.lq)(t);this.#t(e),this.#e(n)}setSelectionRange(...t){this.phoneNumberInput.setSelectionRange(...t)}get selectionStart(){return this.phoneNumberInput.selectionStart}#t(t){if(t){const e=this.getCountryByDialCode(t);e&&(this.countryCodeInput.selectedItem=e)}else this.countryCodeInput.selectedItem=void 0}#e(t){this.phoneNumberInput.value!==t&&(this.phoneNumberInput.value=t)}get phoneNumberValue(){return this.phoneNumberInput.value}get countryCodeValue(){return this.countryCodeInput.shadowRoot.querySelector("input").value}get phoneNumberInputEle(){return this.phoneNumberInput.shadowRoot.querySelector("input")}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}getValidity(){const t=this.countryCodeInput.value,e=this.phoneNumberInput.value,n=!t||!e,o=this.phoneNumberInput.value?.length&&this.phoneNumberInput.value.length<this.minLength;return this.isRequired&&n?{valueMissing:!0}:o?{tooShort:!0}:e&&!t?{valueMissing:!0}:{}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[1].focus()})),super.init?.(),this.initInputs()}getRestrictedCountries(){const t=this.getAttribute("restrict-countries");return t?t.split(","):[]}getCountryByDialCode(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-id")===t))}getCountryByCodeId(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}updateCountryCodeItems(t){const e=t.length?i.A.filter((e=>t.includes(e.code))):i.A;this.querySelector("descope-combo-box").innerHTML=e.map((t=>(0,l.$B)(t))).join("")}handleDefaultCountryCode(t){if(!this.countryCodeInput.value){const e=this.getCountryByCodeId(t);e&&setTimeout((()=>{this.countryCodeInput.selectedItem=e}))}}initInputs(){this.phoneNumberInput.addEventListener("input",(t=>{if(!this.allowAlphanumericInput){const e=/^\d$/,n=t.target.value.split("").filter((t=>e.test(t))).join("");t.target.value=n}})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}handleLabelTypeAttrs(t,e){const n=c[t]||t;"label-type"===t?this.onLabelTypeChange(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.countryCodeInput.setAttribute(n,e):"label"===t&&this.phoneNumberInput.setAttribute(n,e))}onLabelTypeChange(t){"floating"===t?(this.countryCodeInput.setAttribute("label",this.getAttribute("country-input-label")||""),this.countryCodeInput.setAttribute("placeholder",this.getAttribute("country-input-placeholder")||""),this.phoneNumberInput.setAttribute("label",this.getAttribute("label")||""),this.phoneNumberInput.setAttribute("placeholder",this.getAttribute("phone-input-placeholder")||"")):this.inputs.forEach((t=>t.removeAttribute("label")))}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n){if("default-code"===t&&n)this.handleDefaultCountryCode(n);else if(h.includes(t)){const e=c[t]||t;s.includes(t)?this.inputs.forEach((t=>t.setAttribute(e,n))):a.includes(t)?this.countryCodeInput.setAttribute(e,n):u.includes(t)&&this.phoneNumberInput.setAttribute(e,n)}d.includes(t)&&this.handleLabelTypeAttrs(t,n),"restrict-countries"===t&&this.updateCountryCodeItems(this.getRestrictedCountries())}}}},54930:(t,e,n)=>{n.r(e),n(4480),n(89348);var o=n(32413);customElements.define(o.T,o.A)},41611:(t,e,n)=>{n.d(e,{$B:()=>r,lq:()=>i});var o=n(11211);const r=({code:t,dialCode:e,name:n})=>`\n\t<div\n\t\tstyle="display:flex; flex-direction: column;"\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${n}"\n\t\tdata-country-code="${t}"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src="${(t=>`https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${t.toLowerCase()}.svg`)(t)}" width="20"/>\n\t\t\t</span>\n\t\t\t<span>${n}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${t}</span>\n\t\t\t<span>${e}</span>\n\t\t</div>\n\t</div>\n`,i=t=>{const e=t||"";let n="",r="";const i=(0,o.l)(e);if(i)i.countryCallingCode&&(n=`+${i.countryCallingCode}`),i.nationalNumber&&(r=i.nationalNumber);else{const[t,o]=e.split("-");n=t||"",r=o||""}return[n,r]}},96442:(t,e,n)=>{n.r(e),n.d(e,{PhoneFieldClass:()=>o.NF}),n(54930),n(4480),n(89348);var o=n(23758);customElements.define(o.TQ,o.NF)}}]);

package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js

@@ -1,5 +1,5 @@
 /*! For license information please see phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js.LICENSE.txt */
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[8657],{69473:(t,e,n)=>{n.d(e,{T:()=>o,w:()=>u});var i=n(94619),a=n(93826),l=n(7138),r=n(14944),s=n(33177);const o=(0,r.xE)("text-field"),d=["type","label-type","copy-to-clipboard"],u=(0,l.Zz)((0,i.RF)({mappings:a.A}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),i.tQ,(t=>class extends t{static get observedAttributes(){return d.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},n={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,n),setTimeout((()=>{Object.assign(this.icon,e)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}}))((0,i.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${u.cssVarList.inputOutlineWidth}) + var(${u.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,s.$J)("vaadin-text-field")}\n\t\t\t${(0,s.cy)(u.cssVarList)}\n\t\t\t${(0,s.LJ)("vaadin-text-field",u.cssVarList)}\n      ${(0,s.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:o}))},89348:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>i.w}),n(39542),n(66418),n(56637);var i=n(69473);customElements.define(i.T,i.w)},43945:(t,e,n)=>{n.d(e,{A:()=>u,T:()=>r});var i=n(25827),a=n(14944),l=n(63789);const r=(0,a.xE)("phone-field-internal-input-box"),s=["disabled","size","bordered","invalid","readonly","phone-input-placeholder","name","autocomplete","label-type","allow-alphanumeric-input"],o={"phone-input-placeholder":"placeholder"},d=(0,i.y)({componentName:r,baseSelector:"div"}),u=class extends d{static get observedAttributes(){return[].concat(d.observedAttributes||[],s)}constructor(){super(),this.innerHTML='\n      <div>\n        <descope-text-field tabindex="1"></descope-text-field>\n      </div>\n      ',this.phoneNumberInput=this.querySelector("descope-text-field")}get defaultCountryCode(){return(0,l.Q)(this.getAttribute("default-code"))}get hasDefaultCode(){return!!this.getAttribute("default-code")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get value(){if(!this.phoneNumberValue)return"";if(this.hasDefaultCode){const t=new RegExp(`\\+?${parseInt(this.defaultCountryCode,10)}--?`);return`${this.defaultCountryCode}-${this.phoneNumberInput.value.replace(t,"")}`}return this.phoneNumberInput.value}set value(t){this.phoneNumberInput.value=t}get phoneNumberValue(){return this.phoneNumberInput.value}get phoneNumberInputEle(){return this.phoneNumberInput.shadowRoot.querySelector("input")}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get maxLength(){return parseInt(this.getAttribute("maxlength"),10)||50}getValidity(){const t=this.value.replace(/\D/g,"");return this.isRequired&&!this.value?{valueMissing:!0}:t.length<this.minLength?{tooShort:!0}:t.length>this.maxLength?{tooLong:!0}:/^\+?\d{1,4}-?(?:\d-?){1,15}$/.test(this.value)?{}:{patternMismatch:!0}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.phoneNumberInput.focus()})),super.init?.(),this.initInputs()}getCountryByDialCode(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}initInputs(){this.phoneNumberInput.addEventListener("input",(t=>{1===t.target.value.length&&"-"===t.target.value&&(t.target.value=""),t.target.value=t.target.value.replace(/(?!^)\+/g,"").replace("--","-").replace("+-","+");let e=t.target.value;if(!this.allowAlphanumericInput){const n=/^[+\d-]+$/;e=t.target.value.split("").filter((t=>n.test(t))).join("")}t.target.value=e})),this.handleFocusEventsDispatching([this.phoneNumberInput])}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n&&s.includes(t)){const e=o[t]||t;this.phoneNumberInput.setAttribute(e,n)}}}},46633:(t,e,n)=>{n.r(e),n(89348);var i=n(43945);customElements.define(i.T,i.A)},63789:(t,e,n)=>{n.d(e,{Q:()=>a});var i=n(44066);const a=t=>i.A.find((e=>e.code===t))?.dialCode},33177:(t,e,n)=>{n.d(e,{$J:()=>c,I4:()=>r,Kl:()=>h,LJ:()=>p,Qv:()=>l,X6:()=>o,cy:()=>i,fu:()=>d,kG:()=>u,lS:()=>s,zm:()=>a});const i=t=>`\n    :host {\n        padding: calc(var(${t.inputOutlineWidth}) + var(${t.inputOutlineOffset}))\n    }\n`,a=t=>`\n    ${t} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,l=t=>`\n    ${t}::part(input-field) {\n        overflow: hidden;\n        padding: 0;\n        box-shadow: none;\n    }\n`,r=t=>`\n    ${t} > label,\n    ${t}::part(label),\n    ${t}::part(required-indicator) {\n        cursor: pointer;\n    }\n`,s=(t,e="input")=>`\n    ${t}[disabled] > ${e}:placeholder-shown,\n\t${t}[readonly] > ${e}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,o=()=>"\n    :host {\n        --vaadin-field-default-width: auto;\n        box-sizing: border-box;\n    }\n",d=t=>`\n    ${t}::part(input-field)::after {\n        opacity: 0;\n    }\n`,u=t=>`\n    ${t}::part(input-field)::after {\n        background: none;\n    }\n`,p=(t,e)=>`\n    ${a(t)}\n    ${r(t)}\n    ${s(t)}\n    ${l(t)}\n    ${((t,e)=>`\n    ${t} input:-webkit-autofill,\n    ${t} input:-webkit-autofill::first-line,\n    ${t} input:-webkit-autofill:hover,\n    ${t} input:-webkit-autofill:active,\n    ${t} input:-webkit-autofill:focus {\n        -webkit-text-fill-color: var(${e.inputValueTextColor});\n        box-shadow: 0 0 0 var(${e.inputHeight}) var(${e.inputBackgroundColor}) inset;\n    }\n`)(t,e)}\n    ${u(t)}\n    ${(t=>`\n    ${t}::before {\n\t\theight: unset;\n\t}\n`)(t)}\n    ${(t=>`\n    ${t} > input {\n        -webkit-mask-image: none;\n        min-height: 0;\n        box-sizing: border-box;\n    }\n`)(t)}\n    ${(t=>`\n    ${t}::part(input-field)::after {\n        border: none;\n    }\n`)(t)}\n`,c=t=>`\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n    :host([required]) ::part(required-indicator) {\n      width: 1em;\n      display: inline-flex;\n    }\n    :host([required]) ::part(required-indicator)::after {\n      position: static;\n    }\n    :host([has-label]) ::part(label) {\n      padding-right: 0;\n      padding-bottom: 0;\n      display: flex;\n      width: 100%;\n    }\n    ${t} [slot="label"] {\n      max-width: calc(100% - 1em);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      padding-bottom: 0.5em;\n    }\n`,h=()=>'\n  :host([label-type="floating"]) {\n    position: relative;\n  }\n  :host([label-type="floating"][has-label]) [slot="label"] {\n    padding: 0;\n  }\n  :host([label-type="floating"][has-label]) > ::part(label) {\n    z-index: 1;\n    padding: 0;\n    width: auto;\n  }\n  '},15408:(t,e,n)=>{n.d(e,{f:()=>a});var i=n(32065);class a extends i.r{constructor(t,e){super(t,"input","input",{initializer:(t,n)=>{n.value&&(t.value=n.value),n.type&&t.setAttribute("type",n.type),t.id=this.defaultId,"function"==typeof e&&e(t)},useUniqueId:!0})}}},53430:(t,e,n)=>{n.d(e,{a:()=>a});var i=n(32318);const a=t=>class extends((0,i.R)(t)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(t){this.__dataValue=t}_inputElementChanged(t){super._inputElementChanged(t),t&&(t.value&&t.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),t.value=""),this.value&&(t.value=this.value))}_setFocused(t){super._setFocused(t),!t&&document.hasFocus()&&this.validate()}_onInput(t){super._onInput(t),this.invalid&&this.validate()}_valueChanged(t,e){super._valueChanged(t,e),void 0!==e&&this.invalid&&this.validate()}}},34068:(t,e,n)=>{n.d(e,{A:()=>h}),n(9077);var i=n(33791),a=n(38735),l=n(31846),r=n(58074),s=n(89385),o=n(6052),d=n(15408),u=n(53430),p=n(3550);const c=t=>class extends((0,u.a)(t)){static get properties(){return{maxlength:{type:Number},minlength:{type:Number},pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"maxlength","minlength","pattern"]}static get constraints(){return[...super.constraints,"maxlength","minlength","pattern"]}constructor(){super(),this._setType("text")}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new d.f(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new p.q(this.inputElement,this._labelController))}};(0,o.SF)("vaadin-text-field",s.k,{moduleId:"vaadin-text-field-styles"});class h extends(c((0,o.cp)((0,l.q)(i.Pu)))){static get is(){return"vaadin-text-field"}static get template(){return i.qy`
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[8657],{89348:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>i.w}),n(39542),n(40481),n(96206);var i=n(69473);customElements.define(i.T,i.w)},43945:(t,e,n)=>{n.d(e,{A:()=>d,T:()=>l});var i=n(25827),a=n(14944),r=n(63789);const l=(0,a.xE)("phone-field-internal-input-box"),s=["disabled","size","bordered","invalid","readonly","phone-input-placeholder","name","autocomplete","label-type","allow-alphanumeric-input"],o={"phone-input-placeholder":"placeholder"},u=(0,i.y)({componentName:l,baseSelector:"div"}),d=class extends u{static get observedAttributes(){return[].concat(u.observedAttributes||[],s)}constructor(){super(),this.innerHTML='\n      <div>\n        <descope-text-field tabindex="1"></descope-text-field>\n      </div>\n      ',this.phoneNumberInput=this.querySelector("descope-text-field")}get defaultCountryCode(){return(0,r.Q)(this.getAttribute("default-code"))}get hasDefaultCode(){return!!this.getAttribute("default-code")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get value(){if(!this.phoneNumberValue)return"";if(this.hasDefaultCode){const t=new RegExp(`\\+?${parseInt(this.defaultCountryCode,10)}--?`);return`${this.defaultCountryCode}-${this.phoneNumberInput.value.replace(t,"")}`}return this.phoneNumberInput.value}set value(t){this.phoneNumberInput.value=t}get phoneNumberValue(){return this.phoneNumberInput.value}get phoneNumberInputEle(){return this.phoneNumberInput.shadowRoot.querySelector("input")}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get maxLength(){return parseInt(this.getAttribute("maxlength"),10)||50}getValidity(){const t=this.value.replace(/\D/g,"");return this.isRequired&&!this.value?{valueMissing:!0}:t.length<this.minLength?{tooShort:!0}:t.length>this.maxLength?{tooLong:!0}:/^\+?\d{1,4}-?(?:\d-?){1,15}$/.test(this.value)?{}:{patternMismatch:!0}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.phoneNumberInput.focus()})),super.init?.(),this.initInputs()}getCountryByDialCode(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}initInputs(){this.phoneNumberInput.addEventListener("input",(t=>{1===t.target.value.length&&"-"===t.target.value&&(t.target.value=""),t.target.value=t.target.value.replace(/(?!^)\+/g,"").replace("--","-").replace("+-","+");let e=t.target.value;if(!this.allowAlphanumericInput){const n=/^[+\d-]+$/;e=t.target.value.split("").filter((t=>n.test(t))).join("")}t.target.value=e})),this.handleFocusEventsDispatching([this.phoneNumberInput])}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n&&s.includes(t)){const e=o[t]||t;this.phoneNumberInput.setAttribute(e,n)}}}},46633:(t,e,n)=>{n.r(e),n(89348);var i=n(43945);customElements.define(i.T,i.A)},63789:(t,e,n)=>{n.d(e,{Q:()=>a});var i=n(44066);const a=t=>i.A.find((e=>e.code===t))?.dialCode},33177:(t,e,n)=>{n.d(e,{$J:()=>h,I4:()=>l,Kl:()=>c,LJ:()=>p,Qv:()=>r,X6:()=>o,cy:()=>i,fu:()=>u,kG:()=>d,lS:()=>s,zm:()=>a});const i=t=>`\n    :host {\n        padding: calc(var(${t.inputOutlineWidth}) + var(${t.inputOutlineOffset}))\n    }\n`,a=t=>`\n    ${t} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,r=t=>`\n    ${t}::part(input-field) {\n        overflow: hidden;\n        padding: 0;\n        box-shadow: none;\n    }\n`,l=t=>`\n    ${t} > label,\n    ${t}::part(label),\n    ${t}::part(required-indicator) {\n        cursor: pointer;\n    }\n`,s=(t,e="input")=>`\n    ${t}[disabled] > ${e}:placeholder-shown,\n\t${t}[readonly] > ${e}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,o=()=>"\n    :host {\n        --vaadin-field-default-width: auto;\n        box-sizing: border-box;\n    }\n",u=t=>`\n    ${t}::part(input-field)::after {\n        opacity: 0;\n    }\n`,d=t=>`\n    ${t}::part(input-field)::after {\n        background: none;\n    }\n`,p=(t,e)=>`\n    ${a(t)}\n    ${l(t)}\n    ${s(t)}\n    ${r(t)}\n    ${((t,e)=>`\n    ${t} input:-webkit-autofill,\n    ${t} input:-webkit-autofill::first-line,\n    ${t} input:-webkit-autofill:hover,\n    ${t} input:-webkit-autofill:active,\n    ${t} input:-webkit-autofill:focus {\n        -webkit-text-fill-color: var(${e.inputValueTextColor});\n        box-shadow: 0 0 0 var(${e.inputHeight}) var(${e.inputBackgroundColor}) inset;\n    }\n`)(t,e)}\n    ${d(t)}\n    ${(t=>`\n    ${t}::before {\n\t\theight: unset;\n\t}\n`)(t)}\n    ${(t=>`\n    ${t} > input {\n        -webkit-mask-image: none;\n        min-height: 0;\n        box-sizing: border-box;\n    }\n`)(t)}\n    ${(t=>`\n    ${t}::part(input-field)::after {\n        border: none;\n    }\n`)(t)}\n`,h=t=>`\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n    :host([required]) ::part(required-indicator) {\n      width: 1em;\n      display: inline-flex;\n    }\n    :host([required]) ::part(required-indicator)::after {\n      position: static;\n    }\n    :host([has-label]) ::part(label) {\n      padding-right: 0;\n      padding-bottom: 0;\n      display: flex;\n      width: 100%;\n    }\n    ${t} [slot="label"] {\n      max-width: calc(100% - 1em);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      padding-bottom: 0.5em;\n    }\n`,c=()=>'\n  :host([label-type="floating"]) {\n    position: relative;\n  }\n  :host([label-type="floating"][has-label]) [slot="label"] {\n    padding: 0;\n  }\n  :host([label-type="floating"][has-label]) > ::part(label) {\n    z-index: 1;\n    padding: 0;\n    width: auto;\n  }\n  '},15408:(t,e,n)=>{n.d(e,{f:()=>a});var i=n(32065);class a extends i.r{constructor(t,e){super(t,"input","input",{initializer:(t,n)=>{n.value&&(t.value=n.value),n.type&&t.setAttribute("type",n.type),t.id=this.defaultId,"function"==typeof e&&e(t)},useUniqueId:!0})}}},53430:(t,e,n)=>{n.d(e,{a:()=>a});var i=n(35707);const a=t=>class extends((0,i.R)(t)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(t){this.__dataValue=t}_inputElementChanged(t){super._inputElementChanged(t),t&&(t.value&&t.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),t.value=""),this.value&&(t.value=this.value))}_setFocused(t){super._setFocused(t),!t&&document.hasFocus()&&this.validate()}_onInput(t){super._onInput(t),this.invalid&&this.validate()}_valueChanged(t,e){super._valueChanged(t,e),void 0!==e&&this.invalid&&this.validate()}}},36587:(t,e,n)=>{n.d(e,{$:()=>l});var i=n(15408),a=n(53430),r=n(3550);const l=t=>class extends((0,a.a)(t)){static get properties(){return{maxlength:{type:Number},minlength:{type:Number},pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"maxlength","minlength","pattern"]}static get constraints(){return[...super.constraints,"maxlength","minlength","pattern"]}constructor(){super(),this._setType("text")}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new i.f(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new r.q(this.inputElement,this._labelController))}}},48575:(t,e,n)=>{n.d(e,{A:()=>d}),n(28991);var i=n(63033),a=n(38735),r=n(64802),l=n(58074),s=n(98736),o=n(6052),u=n(36587);(0,o.SF)("vaadin-text-field",s.k,{moduleId:"vaadin-text-field-styles"});class d extends((0,u.$)((0,o.cp)((0,r.q)(i.Pu)))){static get is(){return"vaadin-text-field"}static get template(){return i.qy`
       <style>
         [part='input-field'] {
           flex-grow: 0;
@@ -34,4 +34,4 @@
         </div>
       </div>
       <slot name="tooltip"></slot>
-    `}static get properties(){return{maxlength:{type:Number},minlength:{type:Number}}}ready(){super.ready(),this._tooltipController=new r.I(this),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this.addController(this._tooltipController)}}(0,a.X)(h)},70297:(t,e,n)=>{n(37451);var i=n(90500);(0,n(6052).SF)("vaadin-text-field",i.k,{moduleId:"lumo-text-field-styles"}),n(34068)},39542:(t,e,n)=>{n(70297),n(34068)}}]);
+    `}static get properties(){return{maxlength:{type:Number},minlength:{type:Number}}}ready(){super.ready(),this._tooltipController=new l.I(this),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this.addController(this._tooltipController)}}(0,a.X)(d)},97017:(t,e,n)=>{n(37451);var i=n(90500);(0,n(6052).SF)("vaadin-text-field",i.k,{moduleId:"lumo-text-field-styles"})},68898:(t,e,n)=>{n(97017),n(48575)},39542:(t,e,n)=>{n(68898),n(48575)},18504:(t,e,n)=>{n.d(e,{Qk:()=>r,qb:()=>l});var i=n(36752);const{D:a}=i.ge,r={HTML:1,SVG:2},l=(t,e)=>void 0===e?void 0!==t?._$litType$:t?._$litType$===e}}]);

package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js.LICENSE.txt

@@ -9,3 +9,9 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */

package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js

@@ -1,13 +1,5 @@
 /*! For license information please see phone-fields-descope-phone-input-box-field-index-js.js.LICENSE.txt */
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[4043,7052,7212],{69473:(t,e,n)=>{n.d(e,{T:()=>s,w:()=>p});var i=n(94619),o=n(93826),r=n(7138),a=n(14944),l=n(33177);const s=(0,a.xE)("text-field"),d=["type","label-type","copy-to-clipboard"],p=(0,r.Zz)((0,i.RF)({mappings:o.A}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),i.tQ,(t=>class extends t{static get observedAttributes(){return d.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},n={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,n),setTimeout((()=>{Object.assign(this.icon,e)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}}))((0,i.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${p.cssVarList.inputOutlineWidth}) + var(${p.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,l.$J)("vaadin-text-field")}\n\t\t\t${(0,l.cy)(p.cssVarList)}\n\t\t\t${(0,l.LJ)("vaadin-text-field",p.cssVarList)}\n      ${(0,l.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:s}))},89348:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>i.w}),n(39542),n(66418),n(56637);var i=n(69473);customElements.define(i.T,i.w)},43945:(t,e,n)=>{n.d(e,{A:()=>p,T:()=>a});var i=n(25827),o=n(14944),r=n(63789);const a=(0,o.xE)("phone-field-internal-input-box"),l=["disabled","size","bordered","invalid","readonly","phone-input-placeholder","name","autocomplete","label-type","allow-alphanumeric-input"],s={"phone-input-placeholder":"placeholder"},d=(0,i.y)({componentName:a,baseSelector:"div"}),p=class extends d{static get observedAttributes(){return[].concat(d.observedAttributes||[],l)}constructor(){super(),this.innerHTML='\n      <div>\n        <descope-text-field tabindex="1"></descope-text-field>\n      </div>\n      ',this.phoneNumberInput=this.querySelector("descope-text-field")}get defaultCountryCode(){return(0,r.Q)(this.getAttribute("default-code"))}get hasDefaultCode(){return!!this.getAttribute("default-code")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get value(){if(!this.phoneNumberValue)return"";if(this.hasDefaultCode){const t=new RegExp(`\\+?${parseInt(this.defaultCountryCode,10)}--?`);return`${this.defaultCountryCode}-${this.phoneNumberInput.value.replace(t,"")}`}return this.phoneNumberInput.value}set value(t){this.phoneNumberInput.value=t}get phoneNumberValue(){return this.phoneNumberInput.value}get phoneNumberInputEle(){return this.phoneNumberInput.shadowRoot.querySelector("input")}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get maxLength(){return parseInt(this.getAttribute("maxlength"),10)||50}getValidity(){const t=this.value.replace(/\D/g,"");return this.isRequired&&!this.value?{valueMissing:!0}:t.length<this.minLength?{tooShort:!0}:t.length>this.maxLength?{tooLong:!0}:/^\+?\d{1,4}-?(?:\d-?){1,15}$/.test(this.value)?{}:{patternMismatch:!0}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.phoneNumberInput.focus()})),super.init?.(),this.initInputs()}getCountryByDialCode(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}initInputs(){this.phoneNumberInput.addEventListener("input",(t=>{1===t.target.value.length&&"-"===t.target.value&&(t.target.value=""),t.target.value=t.target.value.replace(/(?!^)\+/g,"").replace("--","-").replace("+-","+");let e=t.target.value;if(!this.allowAlphanumericInput){const n=/^[+\d-]+$/;e=t.target.value.split("").filter((t=>n.test(t))).join("")}t.target.value=e})),this.handleFocusEventsDispatching([this.phoneNumberInput])}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n&&l.includes(t)){const e=s[t]||t;this.phoneNumberInput.setAttribute(e,n)}}}},46633:(t,e,n)=>{n.r(e),n(89348);var i=n(43945);customElements.define(i.T,i.A)},65636:(t,e,n)=>{n.r(e),n.d(e,{PhoneFieldInputBoxClass:()=>C}),n(46633),n(4480),n(89348);var i=n(43945),o=n(14944),r=n(7138),a=n(94619),l=n(69473),s=n(44066),d=n(33177);const p=l.w.cssVarList,u=(0,o.xE)("phone-input-box-field"),{host:c,label:h,inputElement:b,requiredIndicator:v,inputField:m,inputFieldInternal:g,phoneInput:y,errorMessage:f,helperText:x}={host:{selector:()=>":host"},label:{selector:"::part(label)"},placeholder:{selector:"> input:placeholder-shown"},inputElement:{selector:"input"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:()=>"vaadin-text-field::part(input-field)"},inputFieldInternal:{selector:()=>"descope-phone-field-internal-input-box vaadin-text-field::part(input-field)"},phoneInput:{selector:()=>"descope-text-field"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},C=(0,r.Zz)((0,a.RF)({mappings:{fontSize:[c,m,{selector:l.w.componentName,property:l.w.cssVarList.fontSize}],fontFamily:[h,f,x],hostWidth:{...c,property:"width"},hostMinWidth:{...c,property:"min-width"},hostDirection:{...c,property:"direction"},inputBorderStyle:{...g,property:"border-style"},inputBorderWidth:{...g,property:"border-width"},inputBorderColor:{...g,property:"border-color"},inputBorderRadius:[{...m,property:"border-radius"},{...g,property:"border-radius"}],inputHorizontalPadding:[{...y,property:"padding-left"},{...y,property:"padding-right"}],labelFontSize:{...h,property:"font-size"},labelFontWeight:{...h,property:"font-weight"},labelTextColor:[{...h,property:"color"},{...v,property:"color"}],labelRequiredIndicator:{...v,property:"content"},errorMessageTextColor:{...f,property:"color"},inputValueTextColor:{...y,property:p.inputValueTextColor},inputPlaceholderTextColor:{...y,property:p.inputPlaceholderColor},inputOutlineStyle:{...m,property:"outline-style"},inputOutlineColor:{...m,property:"outline-color"},inputOutlineWidth:{...m,property:"outline-width"},inputOutlineOffset:{...m,property:"outline-offset"},labelPosition:{...h,property:"position"},labelTopPosition:{...h,property:"top"},labelHorizontalPosition:[{...h,property:"left"},{...h,property:"right"}],inputTransformY:{...h,property:"transform"},inputTransition:{...h,property:"transition"},marginInlineStart:{...h,property:"margin-inline-start"},valueInputHeight:{...b,property:"height"},valueInputMarginBottom:{selector:l.w.componentName,property:p.valueInputMarginBottom}}}),a.VO,(0,a.OZ)({proxyProps:["value","selectionStart"]}),(t=>class extends t{static get CountryCodes(){return s.A}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${i.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${i.T}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(i.T),(0,o.EA)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","invalid","minlength","maxlength","default-code","disabled","phone-input-placeholder","label","label-type","allow-alphanumeric-input"]})}get phoneNumberInputEle(){return this.inputElement?.phoneNumberInputEle}}))((0,a.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n    :host {\n      display: inline-flex;\n      max-width: 100%;\n      box-sizing: border-box;\n    }\n    ${(0,d.cy)(C.cssVarList)}\n    ${(0,d.I4)("vaadin-text-field")}\n    ${(0,d.kG)("vaadin-text-field")}\n    ${(0,d.X6)()}\n\n    vaadin-text-field {\n      width: 100%;\n      box-sizing: border-box;\n      padding: 0;\n    }\n    vaadin-text-field[focus-ring]::part(input-field) {\n      box-shadow: none;\n    }\n    vaadin-text-field::before {\n      height: 0;\n    }\n    vaadin-text-field::part(input-field) {\n      padding: 0;\n      background: transparent;\n      overflow: hidden;\n      -webkit-mask-image: none;\n    }\n    descope-phone-field-internal-input-box {\n      -webkit-mask-image: none;\n      padding: 0;\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box > div {\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box .separator {\n      flex: 0;\n      border: none;\n    }\n    descope-phone-field-internal-input-box descope-text-field {\n      ${p.inputOutlineWidth}: 0;\n      ${p.inputOutlineOffset}: 0;\n    }\n    descope-text-field {\n      flex-grow: 1;\n      width: 100%;\n      direction: ltr;\n    }\n    vaadin-text-field[readonly] > input:placeholder-shown {\n      opacity: 1;\n    }\n    vaadin-text-field::part(input-field)::after {\n      border: none;\n    }\n\n    vaadin-text-field[label-type="floating"]:not([focused])[readonly] input:placeholder-shown {\n      opacity: 0;\n    }\n    vaadin-text-field[label-type="floating"]:not([focused])[disabled] input:placeholder-shown {\n      opacity: 0;\n    }\n\n    ${(0,d.$J)("vaadin-text-field")}\n    ${(0,d.Kl)()}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:u}));customElements.define(u,C)},63789:(t,e,n)=>{n.d(e,{Q:()=>o});var i=n(44066);const o=t=>i.A.find((e=>e.code===t))?.dialCode},31111:(t,e,n)=>{n(46165),n(14968),n(37451),n(72815);var i=n(90500),o=n(6052);const r=o.AH`
-  :host {
-    outline: none;
-  }
-
-  [part='toggle-button']::before {
-    content: var(--lumo-icons-dropdown);
-  }
-`;(0,o.SF)("vaadin-combo-box",[i.k,r],{moduleId:"lumo-combo-box"}),n(9077);var a=n(33791),l=n(38735),s=n(35717),d=n(10187);class p extends((0,d.y)((0,o.cp)((0,s.v)(a.Pu)))){static get template(){return a.qy`
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[4043,7052,8114],{89348:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>o.w}),n(39542),n(40481),n(96206);var o=n(69473);customElements.define(o.T,o.w)},96800:(t,e,n)=>{n.d(e,{TQ:()=>u,Ul:()=>w});var o=n(43945),r=n(14944),i=n(7138),a=n(94619),l=n(69473),s=n(44066),d=n(33177);const p=l.w.cssVarList,u=(0,r.xE)("phone-input-box-field"),{host:c,label:h,inputElement:g,requiredIndicator:m,inputField:v,inputFieldInternal:b,phoneInput:y,errorMessage:f,helperText:x}={host:{selector:()=>":host"},label:{selector:"::part(label)"},placeholder:{selector:"> input:placeholder-shown"},inputElement:{selector:"input"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:()=>"vaadin-text-field::part(input-field)"},inputFieldInternal:{selector:()=>"descope-phone-field-internal-input-box vaadin-text-field::part(input-field)"},phoneInput:{selector:()=>"descope-text-field"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},w=(0,i.Zz)((0,a.RF)({mappings:{fontSize:[c,v,{selector:l.w.componentName,property:l.w.cssVarList.fontSize}],fontFamily:[h,f,x],hostWidth:{...c,property:"width"},hostMinWidth:{...c,property:"min-width"},hostDirection:{...c,property:"direction"},inputBorderStyle:{...b,property:"border-style"},inputBorderWidth:{...b,property:"border-width"},inputBorderColor:{...b,property:"border-color"},inputBorderRadius:[{...v,property:"border-radius"},{...b,property:"border-radius"}],inputHorizontalPadding:[{...y,property:"padding-left"},{...y,property:"padding-right"}],labelFontSize:{...h,property:"font-size"},labelFontWeight:{...h,property:"font-weight"},labelTextColor:[{...h,property:"color"},{...m,property:"color"}],labelRequiredIndicator:{...m,property:"content"},errorMessageTextColor:{...f,property:"color"},errorMessageIcon:{...f,property:"background-image"},errorMessageIconSize:{...f,property:"background-size"},errorMessageIconPadding:{...f,property:"padding-inline-start"},errorMessageIconRepeat:{...f,property:"background-repeat"},errorMessageIconPosition:{...f,property:"background-position"},inputValueTextColor:{...y,property:p.inputValueTextColor},inputPlaceholderTextColor:{...y,property:p.inputPlaceholderColor},inputOutlineStyle:{...v,property:"outline-style"},inputOutlineColor:{...v,property:"outline-color"},inputOutlineWidth:{...v,property:"outline-width"},inputOutlineOffset:{...v,property:"outline-offset"},labelPosition:{...h,property:"position"},labelTopPosition:{...h,property:"top"},labelHorizontalPosition:[{...h,property:"left"},{...h,property:"right"}],inputTransformY:{...h,property:"transform"},inputTransition:{...h,property:"transition"},marginInlineStart:{...h,property:"margin-inline-start"},valueInputHeight:{...g,property:"height"},valueInputMarginBottom:{selector:l.w.componentName,property:p.valueInputMarginBottom}}}),a.VO,(0,a.OZ)({proxyProps:["value","selectionStart"]}),(t=>class extends t{static get CountryCodes(){return s.A}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${o.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${o.T}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.T),(0,r.EA)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","invalid","minlength","maxlength","default-code","disabled","phone-input-placeholder","label","label-type","allow-alphanumeric-input"]})}get phoneNumberInputEle(){return this.inputElement?.phoneNumberInputEle}}))((0,a.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n    :host {\n      display: inline-flex;\n      max-width: 100%;\n      box-sizing: border-box;\n    }\n    ${(0,d.cy)(w.cssVarList)}\n    ${(0,d.I4)("vaadin-text-field")}\n    ${(0,d.kG)("vaadin-text-field")}\n    ${(0,d.X6)()}\n\n    vaadin-text-field {\n      width: 100%;\n      box-sizing: border-box;\n      padding: 0;\n    }\n    vaadin-text-field[focus-ring]::part(input-field) {\n      box-shadow: none;\n    }\n    vaadin-text-field::before {\n      height: 0;\n    }\n    vaadin-text-field::part(input-field) {\n      padding: 0;\n      background: transparent;\n      overflow: hidden;\n      -webkit-mask-image: none;\n    }\n    descope-phone-field-internal-input-box {\n      -webkit-mask-image: none;\n      padding: 0;\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box > div {\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box .separator {\n      flex: 0;\n      border: none;\n    }\n    descope-phone-field-internal-input-box descope-text-field {\n      ${p.inputOutlineWidth}: 0;\n      ${p.inputOutlineOffset}: 0;\n    }\n    descope-text-field {\n      flex-grow: 1;\n      width: 100%;\n      direction: ltr;\n    }\n    vaadin-text-field[readonly] > input:placeholder-shown {\n      opacity: 1;\n    }\n    vaadin-text-field::part(input-field)::after {\n      border: none;\n    }\n\n    vaadin-text-field[label-type="floating"]:not([focused])[readonly] input:placeholder-shown {\n      opacity: 0;\n    }\n    vaadin-text-field[label-type="floating"]:not([focused])[disabled] input:placeholder-shown {\n      opacity: 0;\n    }\n\n    ${(0,d.$J)("vaadin-text-field")}\n    ${(0,d.Kl)()}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:u}))},43945:(t,e,n)=>{n.d(e,{A:()=>p,T:()=>a});var o=n(25827),r=n(14944),i=n(63789);const a=(0,r.xE)("phone-field-internal-input-box"),l=["disabled","size","bordered","invalid","readonly","phone-input-placeholder","name","autocomplete","label-type","allow-alphanumeric-input"],s={"phone-input-placeholder":"placeholder"},d=(0,o.y)({componentName:a,baseSelector:"div"}),p=class extends d{static get observedAttributes(){return[].concat(d.observedAttributes||[],l)}constructor(){super(),this.innerHTML='\n      <div>\n        <descope-text-field tabindex="1"></descope-text-field>\n      </div>\n      ',this.phoneNumberInput=this.querySelector("descope-text-field")}get defaultCountryCode(){return(0,i.Q)(this.getAttribute("default-code"))}get hasDefaultCode(){return!!this.getAttribute("default-code")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get value(){if(!this.phoneNumberValue)return"";if(this.hasDefaultCode){const t=new RegExp(`\\+?${parseInt(this.defaultCountryCode,10)}--?`);return`${this.defaultCountryCode}-${this.phoneNumberInput.value.replace(t,"")}`}return this.phoneNumberInput.value}set value(t){this.phoneNumberInput.value=t}get phoneNumberValue(){return this.phoneNumberInput.value}get phoneNumberInputEle(){return this.phoneNumberInput.shadowRoot.querySelector("input")}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get maxLength(){return parseInt(this.getAttribute("maxlength"),10)||50}getValidity(){const t=this.value.replace(/\D/g,"");return this.isRequired&&!this.value?{valueMissing:!0}:t.length<this.minLength?{tooShort:!0}:t.length>this.maxLength?{tooLong:!0}:/^\+?\d{1,4}-?(?:\d-?){1,15}$/.test(this.value)?{}:{patternMismatch:!0}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.phoneNumberInput.focus()})),super.init?.(),this.initInputs()}getCountryByDialCode(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}initInputs(){this.phoneNumberInput.addEventListener("input",(t=>{1===t.target.value.length&&"-"===t.target.value&&(t.target.value=""),t.target.value=t.target.value.replace(/(?!^)\+/g,"").replace("--","-").replace("+-","+");let e=t.target.value;if(!this.allowAlphanumericInput){const n=/^[+\d-]+$/;e=t.target.value.split("").filter((t=>n.test(t))).join("")}t.target.value=e})),this.handleFocusEventsDispatching([this.phoneNumberInput])}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n&&l.includes(t)){const e=s[t]||t;this.phoneNumberInput.setAttribute(e,n)}}}},46633:(t,e,n)=>{n.r(e),n(89348);var o=n(43945);customElements.define(o.T,o.A)},87743:(t,e,n)=>{n.r(e),n.d(e,{PhoneFieldInputBoxClass:()=>o.Ul}),n(46633),n(4480),n(89348);var o=n(96800);customElements.define(o.TQ,o.Ul)},63789:(t,e,n)=>{n.d(e,{Q:()=>r});var o=n(44066);const r=t=>o.A.find((e=>e.code===t))?.dialCode},11615:(t,e,n)=>{var o=n(63033),r=n(38735),i=n(35717),a=n(6052),l=n(10187);class s extends((0,l.y)((0,a.cp)((0,i.v)(o.Pu)))){static get template(){return o.qy`
       <style>
         :host {
           display: block;
@@ -21,7 +13,7 @@
       <div part="content">
         <slot></slot>
       </div>
-    `}static get is(){return"vaadin-combo-box-item"}}(0,l.X)(p);var u=n(21380),c=n(52718),h=n(75482);const b=o.AH`
+    `}static get is(){return"vaadin-combo-box-item"}}(0,r.X)(s)},5774:(t,e,n)=>{var o=n(63033),r=n(38735),i=n(35717),a=n(61191),l=n(52718),s=n(6052),d=n(75482);const p=s.AH`
   #overlay {
     width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
   }
@@ -31,13 +23,13 @@
     flex-direction: column;
     height: 100%;
   }
-`;(0,o.SF)("vaadin-combo-box-overlay",[c.B,b],{moduleId:"vaadin-combo-box-overlay-styles"});class v extends((0,h.p)((0,u.c)((0,s.v)((0,o.cp)(a.Pu))))){static get is(){return"vaadin-combo-box-overlay"}static get template(){return a.qy`
+`;(0,s.SF)("vaadin-combo-box-overlay",[l.B,p],{moduleId:"vaadin-combo-box-overlay-styles"});class u extends((0,d.p)((0,a.c)((0,i.v)((0,s.cp)(o.Pu))))){static get is(){return"vaadin-combo-box-overlay"}static get template(){return o.qy`
       <div id="backdrop" part="backdrop" hidden></div>
       <div part="overlay" id="overlay">
         <div part="loader"></div>
         <div part="content" id="content"><slot></slot></div>
       </div>
-    `}}(0,l.X)(v);var m=n(44998);class g extends((0,m.N)(a.Pu)){static get is(){return"vaadin-combo-box-scroller"}static get template(){return a.qy`
+    `}}(0,r.X)(u)},48754:(t,e,n)=>{var o=n(63033),r=n(38735),i=n(44998);class a extends((0,i.N)(o.Pu)){static get is(){return"vaadin-combo-box-scroller"}static get template(){return o.qy`
       <style>
         :host {
           display: block;
@@ -64,7 +56,7 @@
       <div id="selector">
         <slot></slot>
       </div>
-    `}}(0,l.X)(g);var y=n(31846),f=n(58074),x=n(32318),C=n(15408),w=n(3550),_=n(3410);const I=t=>class extends((0,_.U)(t)){static get properties(){return{pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"pattern"]}static get constraints(){return[...super.constraints,"pattern"]}};var E=n(89385),k=n(5792),T=n(93131);(0,o.SF)("vaadin-combo-box",E.k,{moduleId:"vaadin-combo-box-styles"});class A extends((0,k.K)((0,T.x)(I((0,x.R)((0,o.cp)((0,y.q)(a.Pu))))))){static get is(){return"vaadin-combo-box"}static get template(){return a.qy`
+    `}}(0,r.X)(a)},82871:(t,e,n)=>{n(28991),n(11615),n(5774),n(48754);var o=n(63033),r=n(38735),i=n(64802),a=n(58074),l=n(35707),s=n(15408),d=n(3550),p=n(98721),u=n(98736),c=n(6052),h=n(5792),g=n(12227);(0,c.SF)("vaadin-combo-box",u.k,{moduleId:"vaadin-combo-box-styles"});class m extends((0,h.K)((0,g.x)((0,p.G)((0,l.R)((0,c.cp)((0,i.q)(o.Pu))))))){static get is(){return"vaadin-combo-box"}static get template(){return o.qy`
       <style>
         :host([opened]) {
           pointer-events: auto;
@@ -110,7 +102,15 @@
       ></vaadin-combo-box-overlay>
 
       <slot name="tooltip"></slot>
-    `}static get properties(){return{_positionTarget:{type:Object}}}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new C.f(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new w.q(this.inputElement,this._labelController)),this._tooltipController=new f.I(this),this.addController(this._tooltipController),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this._tooltipController.setShouldShow((t=>!t.opened)),this._positionTarget=this.shadowRoot.querySelector('[part="input-field"]'),this._toggleElement=this.$.toggleButton}_onClearButtonClick(t){t.stopPropagation(),super._onClearButtonClick(t)}_onHostClick(t){const e=t.composedPath();(e.includes(this._labelNode)||e.includes(this._positionTarget))&&super._onHostClick(t)}}(0,l.X)(A)},53430:(t,e,n)=>{n.d(e,{a:()=>o});var i=n(32318);const o=t=>class extends((0,i.R)(t)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(t){this.__dataValue=t}_inputElementChanged(t){super._inputElementChanged(t),t&&(t.value&&t.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),t.value=""),this.value&&(t.value=this.value))}_setFocused(t){super._setFocused(t),!t&&document.hasFocus()&&this.validate()}_onInput(t){super._onInput(t),this.invalid&&this.validate()}_valueChanged(t,e){super._valueChanged(t,e),void 0!==e&&this.invalid&&this.validate()}}},34068:(t,e,n)=>{n.d(e,{A:()=>h}),n(9077);var i=n(33791),o=n(38735),r=n(31846),a=n(58074),l=n(89385),s=n(6052),d=n(15408),p=n(53430),u=n(3550);const c=t=>class extends((0,p.a)(t)){static get properties(){return{maxlength:{type:Number},minlength:{type:Number},pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"maxlength","minlength","pattern"]}static get constraints(){return[...super.constraints,"maxlength","minlength","pattern"]}constructor(){super(),this._setType("text")}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new d.f(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new u.q(this.inputElement,this._labelController))}};(0,s.SF)("vaadin-text-field",l.k,{moduleId:"vaadin-text-field-styles"});class h extends(c((0,s.cp)((0,r.q)(i.Pu)))){static get is(){return"vaadin-text-field"}static get template(){return i.qy`
+    `}static get properties(){return{_positionTarget:{type:Object}}}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new s.f(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new d.q(this.inputElement,this._labelController)),this._tooltipController=new a.I(this),this.addController(this._tooltipController),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this._tooltipController.setShouldShow((t=>!t.opened)),this._positionTarget=this.shadowRoot.querySelector('[part="input-field"]'),this._toggleElement=this.$.toggleButton}_onClearButtonClick(t){t.stopPropagation(),super._onClearButtonClick(t)}_onHostClick(t){const e=t.composedPath();(e.includes(this._labelNode)||e.includes(this._positionTarget))&&super._onHostClick(t)}}(0,r.X)(m)},27015:(t,e,n)=>{n(37451),n(35842);var o=n(90500),r=n(6052);const i=r.AH`
+  :host {
+    outline: none;
+  }
+
+  [part='toggle-button']::before {
+    content: var(--lumo-icons-dropdown);
+  }
+`;(0,r.SF)("vaadin-combo-box",[o.k,i],{moduleId:"lumo-combo-box"})},10484:(t,e,n)=>{n(46165),n(14968),n(27015),n(82871)},92672:(t,e,n)=>{n(10484),n(82871)},53430:(t,e,n)=>{n.d(e,{a:()=>r});var o=n(35707);const r=t=>class extends((0,o.R)(t)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(t){this.__dataValue=t}_inputElementChanged(t){super._inputElementChanged(t),t&&(t.value&&t.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),t.value=""),this.value&&(t.value=this.value))}_setFocused(t){super._setFocused(t),!t&&document.hasFocus()&&this.validate()}_onInput(t){super._onInput(t),this.invalid&&this.validate()}_valueChanged(t,e){super._valueChanged(t,e),void 0!==e&&this.invalid&&this.validate()}}},98721:(t,e,n)=>{n.d(e,{G:()=>r});var o=n(3410);const r=t=>class extends((0,o.U)(t)){static get properties(){return{pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"pattern"]}static get constraints(){return[...super.constraints,"pattern"]}}},36587:(t,e,n)=>{n.d(e,{$:()=>a});var o=n(15408),r=n(53430),i=n(3550);const a=t=>class extends((0,r.a)(t)){static get properties(){return{maxlength:{type:Number},minlength:{type:Number},pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"maxlength","minlength","pattern"]}static get constraints(){return[...super.constraints,"maxlength","minlength","pattern"]}constructor(){super(),this._setType("text")}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new o.f(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new i.q(this.inputElement,this._labelController))}}},48575:(t,e,n)=>{n.d(e,{A:()=>p}),n(28991);var o=n(63033),r=n(38735),i=n(64802),a=n(58074),l=n(98736),s=n(6052),d=n(36587);(0,s.SF)("vaadin-text-field",l.k,{moduleId:"vaadin-text-field-styles"});class p extends((0,d.$)((0,s.cp)((0,i.q)(o.Pu)))){static get is(){return"vaadin-text-field"}static get template(){return o.qy`
       <style>
         [part='input-field'] {
           flex-grow: 0;
@@ -145,4 +145,4 @@
         </div>
       </div>
       <slot name="tooltip"></slot>
-    `}static get properties(){return{maxlength:{type:Number},minlength:{type:Number}}}ready(){super.ready(),this._tooltipController=new a.I(this),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this.addController(this._tooltipController)}}(0,o.X)(h)},70297:(t,e,n)=>{n(37451);var i=n(90500);(0,n(6052).SF)("vaadin-text-field",i.k,{moduleId:"lumo-text-field-styles"}),n(34068)},39542:(t,e,n)=>{n(70297),n(34068)}}]);
+    `}static get properties(){return{maxlength:{type:Number},minlength:{type:Number}}}ready(){super.ready(),this._tooltipController=new a.I(this),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this.addController(this._tooltipController)}}(0,r.X)(p)},97017:(t,e,n)=>{n(37451);var o=n(90500);(0,n(6052).SF)("vaadin-text-field",o.k,{moduleId:"lumo-text-field-styles"})},68898:(t,e,n)=>{n(97017),n(48575)},39542:(t,e,n)=>{n(68898),n(48575)},18504:(t,e,n)=>{n.d(e,{Qk:()=>i,qb:()=>a});var o=n(36752);const{D:r}=o.ge,i={HTML:1,SVG:2},a=(t,e)=>void 0===e?void 0!==t?._$litType$:t?._$litType$===e}}]);

package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js.LICENSE.txt

@@ -15,3 +15,9 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.409",
+  "version": "1.0.411",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/boolean-fields/descope-checkbox/CheckboxClass.js

@@ -49,6 +49,11 @@ export const CheckboxClass = compose(
       labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
 
       errorMessageTextColor: { ...errorMessage, property: 'color' },
+      errorMessageIcon: { ...errorMessage, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
 
       inputValueTextColor: { ...checkboxSurface, property: 'color' },
       inputBackgroundColor: { ...checkboxElement, property: 'background-color' },

package/src/components/boolean-fields/descope-switch-toggle/SwitchToggleClass.js

@@ -50,6 +50,12 @@ export const SwitchToggleClass = compose(
 
       errorMessageTextColor: { ...errorMessage, property: 'color' },
 
+      errorMessageIcon: { ...errorMessage, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
+
       trackBorderWidth: { ...track, property: 'border-width' },
       trackBorderStyle: { ...track, property: 'border-style' },
       trackBorderColor: { ...track, property: 'border-color' },

package/src/components/button-selection-group-fields/baseButtonSelectionGroup.js

@@ -107,6 +107,11 @@ export const buttonSelectionGroupMappings = {
   ],
   labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
   errorMessageTextColor: { ...errorMessage, property: 'color' },
+  errorMessageIcon: { ...errorMessage, property: 'background-image' },
+  errorMessageIconSize: { ...errorMessage, property: 'background-size' },
+  errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
+  errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
+  errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
   itemsSpacing: { ...internalWrapper, property: 'gap' },
 };
 

package/src/components/descope-combo-box/ComboBoxClass.js

@@ -358,6 +358,11 @@ export const ComboBoxClass = compose(
         { ...requiredIndicator, property: 'color' },
       ],
       errorMessageTextColor: { ...errorMessage, property: 'color' },
+      errorMessageIcon: { ...errorMessage, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
       inputHeight: { ...inputField, property: 'height' },
       inputBackgroundColor: { ...inputField, property: 'background-color' },
       inputBorderColor: { ...inputField, property: 'border-color' },

package/src/components/descope-hybrid-field/HybridFieldClass.js

@@ -3,6 +3,8 @@ import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
 import { isNumericValue, sanitizeCountryCodePrefix as sanitizeValue } from './helpers';
+import { PhoneFieldClass } from '../phone-fields/descope-phone-field';
+import { PhoneFieldInputBoxClass } from '../phone-fields/descope-phone-input-box-field';
 
 export const componentName = getComponentName('hybrid-field');
 
@@ -16,6 +18,9 @@ const attrs = {
     'readonly',
     'required',
     'st-host-direction',
+    'st-error-message-icon',
+    'st-error-message-icon-size',
+    'st-error-message-icon-padding',
   ],
   email: [
     'label',
@@ -301,6 +306,56 @@ export const HybridFieldClass = compose(
         { selector: () => 'descope-phone-field', property: 'direction' },
         { selector: () => 'descope-phone-input-box-field', property: 'direction' },
       ],
+      errorMessageIcon: [
+        {
+          selector: () => PhoneFieldClass.componentName,
+          property: PhoneFieldClass.cssVarList.errorMessageIcon,
+        },
+        {
+          selector: () => PhoneFieldInputBoxClass.componentName,
+          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIcon,
+        },
+      ],
+      errorMessageIconSize: [
+        {
+          selector: () => PhoneFieldClass.componentName,
+          property: PhoneFieldClass.cssVarList.errorMessageIconSize,
+        },
+        {
+          selector: () => PhoneFieldInputBoxClass.componentName,
+          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconSize,
+        },
+      ],
+      errorMessageIconPadding: [
+        {
+          selector: () => PhoneFieldClass.componentName,
+          property: PhoneFieldClass.cssVarList.errorMessageIconPadding,
+        },
+        {
+          selector: () => PhoneFieldInputBoxClass.componentName,
+          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconPadding,
+        },
+      ],
+      errorMessageIconRepeat: [
+        {
+          selector: () => PhoneFieldClass.componentName,
+          property: PhoneFieldClass.cssVarList.errorMessageIconRepeat,
+        },
+        {
+          selector: () => PhoneFieldInputBoxClass.componentName,
+          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconRepeat,
+        },
+      ],
+      errorMessageIconPosition: [
+        {
+          selector: () => PhoneFieldClass.componentName,
+          property: PhoneFieldClass.cssVarList.errorMessageIconPosition,
+        },
+        {
+          selector: () => PhoneFieldInputBoxClass.componentName,
+          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconPosition,
+        },
+      ],
     },
   }),
   draggableMixin,

package/src/components/descope-multi-select-combo-box/MultiSelectComboBoxClass.js

@@ -470,6 +470,11 @@ export const MultiSelectComboBoxClass = compose(
         { ...requiredIndicator, property: 'color' },
       ],
       errorMessageTextColor: { ...errorMessage, property: 'color' },
+      errorMessageIcon: { ...errorMessage, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
       inputHeight: { ...inputField, property: 'min-height' },
       inputBackgroundColor: { ...inputField, property: 'background-color' },
       inputBorderColor: { ...inputField, property: 'border-color' },

package/src/components/descope-new-password/NewPasswordClass.js

@@ -126,6 +126,11 @@ export const NewPasswordClass = compose(
       labelFontWeight: { ...label, property: 'font-weight' },
       labelTextColor: { ...label, property: 'color' },
       errorMessageTextColor: { ...errorMessage, property: 'color' },
+      errorMessageIcon: { ...errorMessage, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
       hostWidth: { ...host, property: 'width' },
       hostMinWidth: { ...host, property: 'min-width' },
       hostDirection: [

package/src/components/descope-passcode/PasscodeClass.js

@@ -93,6 +93,11 @@ export const PasscodeClass = compose(
       ],
       labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
       errorMessageTextColor: { ...errorMessage, property: 'color' },
+      errorMessageIcon: { ...errorMessage, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
       digitValueTextColor: {
         selector: TextFieldClass.componentName,
         property: textVars.inputValueTextColor,

package/src/components/descope-password/PasswordClass.js

@@ -181,6 +181,11 @@ export const PasswordClass = compose(
       ],
       labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
       errorMessageTextColor: { ...errorMessage, property: 'color' },
+      errorMessageIcon: { ...errorMessage, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
 
       inputPlaceholderTextColor: [
         { ...inputElementPlaceholder, property: 'color' },

package/src/components/descope-security-questions-setup/SecurityQuestionsSetupClass.js

@@ -18,6 +18,9 @@ const attrsToSync = [
   'answer-label',
   'answer-placeholder',
   'answer-data-errormessage-value-missing',
+  'st-error-message-icon',
+  'st-error-message-icon-size',
+  'st-error-message-icon-padding',
 ];
 
 const attrsToReRender = ['count', 'questions'];

package/src/components/descope-security-questions-verify/SecurityQuestionsVerifyClass.js

@@ -13,6 +13,9 @@ const textFieldsAttrs = [
   'size',
   'answer-placeholder',
   'answer-data-errormessage-value-missing',
+  'st-error-message-icon',
+  'st-error-message-icon-size',
+  'st-error-message-icon-padding',
 ];
 
 const textsAttrs = ['question-mode'];
@@ -201,6 +204,27 @@ export const SecurityQuestionsVerifyClass = compose(
         selector: () => TextClass.componentName,
         property: 'cursor',
       },
+
+      errorMessageIcon: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.errorMessageIcon,
+      },
+      errorMessageIconSize: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.errorMessageSize,
+      },
+      errorMessageIconPadding: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.errorMessagePadding,
+      },
+      errorMessageIconRepeat: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.errorMessageRepeat,
+      },
+      errorMessageIconPosition: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.errorMessagePosition,
+      },
     },
   }),
   draggableMixin,

package/src/components/descope-text-area/TextAreaClass.js

@@ -52,6 +52,11 @@ export const TextAreaClass = compose(
       ],
       labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
       errorMessageTextColor: { ...errorMessage, property: 'color' },
+      errorMessageIcon: { ...errorMessage, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
       inputBackgroundColor: { ...inputField, property: 'background-color' },
       inputValueTextColor: { ...textArea, property: 'color' },
       inputPlaceholderTextColor: { ...placeholder, property: 'color' },

package/src/components/descope-text-field/textFieldMappings.js

@@ -63,6 +63,12 @@ export default {
   ],
 
   errorMessageTextColor: { ...errorMessage, property: 'color' },
+  errorMessageIcon: { ...errorMessage, property: 'background-image' },
+  errorMessageIconSize: { ...errorMessage, property: 'background-size' },
+  errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
+  errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
+  errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
+
   helperTextColor: { ...helperText, property: '-webkit-text-fill-color' },
 
   inputValueTextColor: [

package/src/components/mapping-fields/descope-mappings-field/MappingsFieldClass.js

@@ -61,6 +61,9 @@ const customMixin = (superclass) =>
           'invalid',
           'readonly',
           'disabled',
+          'st-error-message-icon',
+          'st-error-message-icon-size',
+          'st-error-message-icon-padding',
         ],
       });
 

package/src/components/mapping-fields/descope-mappings-field/descope-mapping-item/MappingItem.js

@@ -3,7 +3,16 @@ import { forwardAttrs, getComponentName } from '../../../../helpers/componentHel
 
 export const componentName = getComponentName('mapping-item');
 
-const inputAttrs = ['size', 'bordered', 'readonly', 'full-width', 'disabled'];
+const inputAttrs = [
+  'size',
+  'bordered',
+  'readonly',
+  'full-width',
+  'disabled',
+  'st-error-message-icon',
+  'st-error-message-icon-size',
+  'st-error-message-icon-padding',
+];
 
 const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });