@descope/web-components-ui 1.0.385 → 1.0.387

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([[9806,9288],{84049:(t,e,o)=>{o.d(e,{H:()=>f,f:()=>l});var n=o(2061),r=o(54567),i=o(54201),a=o(94978);const l=(0,r.iY)("combo-box"),{host:s,inputField:p,inputElement:d,placeholder:u,toggle:c,clearButton:h,label:b,requiredIndicator:y,helperText:m,errorMessage:g}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"input"},placeholder:{selector:"> input:placeholder-shown"},toggle:{selector:"::part(toggle-button)"},clearButton:{selector:"::part(clear-button)"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},f=(0,n.qC)((0,a.yk)({mappings:{hostWidth:{...s,property:"width"},hostDirection:{...s,property:"direction"},fontSize:[{},s],fontFamily:[b,u,p,m,g],labelFontSize:{...b,property:"font-size"},labelFontWeight:{...b,property:"font-weight"},labelTextColor:[{...b,property:"color"},{...y,property:"color"}],errorMessageTextColor:{...g,property:"color"},inputHeight:{...p,property:"height"},inputBackgroundColor:{...p,property:"background-color"},inputBorderColor:{...p,property:"border-color"},inputBorderWidth:{...p,property:"border-width"},inputBorderStyle:{...p,property:"border-style"},inputBorderRadius:{...p,property:"border-radius"},labelRequiredIndicator:{...y,property:"content"},inputValueTextColor:{...p,property:"color"},inputPlaceholderTextColor:{...u,property:"color"},inputDropdownButtonCursor:[{...c,property:"cursor"},{...h,property:"cursor"}],inputDropdownButtonColor:[{...c,property:"color"},{...h,property:"color"}],inputDropdownButtonSize:[{...c,property:"font-size"},{...h,property:"font-size"}],inputDropdownButtonOffset:[{...c,property:"margin-right"},{...c,property:"margin-left"}],inputOutlineColor:{...p,property:"outline-color"},inputOutlineWidth:{...p,property:"outline-width"},inputOutlineStyle:{...p,property:"outline-style"},inputOutlineOffset:{...p,property:"outline-offset"},inputHorizontalPadding:[{...d,property:"padding-left"},{...d,property:"padding-right"}],labelPosition:{...b,property:"position"},labelTopPosition:{...b,property:"top"},labelHorizontalPosition:[{...b,property:"left"},{...b,property:"right"}],inputTransformY:{...b,property:"transform"},inputTransition:{...b,property:"transition"},marginInlineStart:{...b,property:"margin-inline-start"},placeholderOpacity:{...u,property:"opacity"},inputVerticalAlignment:{...p,property:"align-items"},valueInputHeight:{...d,property:"height"},valueInputMarginBottom:{...d,property:"margin-bottom"},overlayBackground:{property:()=>f.cssVarList.overlay.backgroundColor},overlayTextColor:{property:()=>f.cssVarList.overlay.textColor},overlayBorder:{property:()=>f.cssVarList.overlay.border},overlayFontSize:{property:()=>f.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>f.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>f.cssVarList.overlay.cursor},overlayItemBoxShadow:{property:()=>f.cssVarList.overlay.itemBoxShadow},overlayItemPaddingInlineStart:{property:()=>f.cssVarList.overlay.itemPaddingInlineStart},overlayItemPaddingInlineEnd:{property:()=>f.cssVarList.overlay.itemPaddingInlineEnd}}}),a.e4,(0,a.Iw)({name:"overlay",selector:"",mappings:{backgroundColor:{selector:"vaadin-combo-box-scroller"},minHeight:{selector:"vaadin-combo-box-overlay"},margin:{selector:"vaadin-combo-box-overlay"},cursor:{selector:"vaadin-combo-box-item"},fontFamily:{selector:"vaadin-combo-box-item"},textColor:{selector:"vaadin-combo-box-item",property:"color"},fontSize:{selector:"vaadin-combo-box-item"},itemBoxShadow:{selector:"vaadin-combo-box-item",property:"box-shadow"},itemPaddingInlineStart:{selector:"vaadin-combo-box-item",property:"padding-inline-start"},itemPaddingInlineEnd:{selector:"vaadin-combo-box-item",property:"padding-inline-end"}},forward:{include:!1,attributes:["size"]}}),(0,a.dj)({proxyProps:["selectionStart"],inputEvent:"selected-item-changed"}),a.Ae,(t=>class extends t{static get observedAttributes(){return["label-type"]}#t=({displayName:t,value:e,label:o})=>`<span data-name="${o}" data-id="${e}">${t||o}</span>`;#e;get defaultValue(){return this.getAttribute("default-value")}get renderItem(){return this.#t}set renderItem(t){this.#t=t,this.renderItems()}get data(){if(this.#e)return this.#e;const t=this.getAttribute("data");if(t)try{const e=JSON.parse(t);if(this.isValidDataType(e))return e}catch(t){console.error('could not parse data string from attribute "data" -',t.message)}return[]}set data(t){this.isValidDataType(t)&&(this.#e=t,this.renderItems())}isValidDataType(t){const e=Array.isArray(t);return e||console.error("data must be an array, received:",t),e}getItemsTemplate(){return this.data?.reduce?.(((t,e)=>t+(this.renderItem?.(e||{})||"")),"")}renderItems(){const t=this.getItemsTemplate();t&&(this.innerHTML=t)}handleSelectedItem(){const t=this.baseElement.selectedItem?.["data-id"];this.baseElement.selectedItem=void 0,t&&(this.value=t),this.value||this.setDefaultValue()}customValueTransformFn(t){return t}setComboBoxDescriptor(){const t=Object.getOwnPropertyDescriptor(this.inputElement.constructor.prototype,"value"),e=this;Object.defineProperties(this.inputElement,{value:{...t,set(o){if(!e.baseElement.items?.length)return;const n=e.customValueTransformFn(o)||"";n!==this.value&&t.set.call(this,n)}}})}#o(){const t=this.shadowRoot.querySelector(this.baseSelector),e=Array.from(this.children);e.length&&(e.forEach((t=>{Object.defineProperty(t,"data-name",{value:t.getAttribute("data-name"),configurable:!0,writable:!0}),Object.defineProperty(t,"data-id",{value:t.getAttribute("data-id"),configurable:!0,writable:!0})})),t.items=e,setTimeout((()=>{this.handleSelectedItem()}),0)),t.renderer=(t,e,o)=>{t.innerHTML=o.item.outerHTML}}#n(){const t=this.baseElement.shadowRoot.querySelector("vaadin-combo-box-overlay");t._attachOverlay=()=>{t.bringToFront()},t._detachOverlay=()=>{},t._enterModalState=()=>{}}init(){super.init?.(),this.getValidity=function(){return!this.value&&this.isRequired?{valueMissing:!0}:{}},this.setComboBoxDescriptor(),this.#n(),this.renderItems(),(0,r.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,r.P$)(this,this.#o.bind(this)),this.setDefaultValue(),this.baseElement.addEventListener("selected-item-changed",(()=>{this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}))}onLabelClick(){this.isReadOnly||this.isDisabled||(this.focus(),this.setAttribute("opened","true"))}attributeChangedCallback(t,e,o){super.attributeChangedCallback?.(t,e,o),e!==o&&"label-type"===t&&("floating"===o?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick))}setDefaultValue(){this.value=this.defaultValue}set value(t){if(t){const e=this.baseElement.items?.find((e=>e["data-id"]===t));e&&(this.baseElement.selectedItem=e)}else this.baseElement.selectedItem=void 0}get value(){return(this.baseElement.selectedItem?.["data-id"]||this.allowCustomValue)&&this.baseElement.__data.value||""}get allowCustomValue(){return"true"===this.getAttribute("allow-custom-value")}}))((0,a.DM)({slots:["","prefix"],wrappedEleName:"vaadin-combo-box",style:()=>`\n\t\t:host {\n\t\t\tdisplay: inline-flex;\n\t\t\tbox-sizing: border-box;\n\t\t\t-webkit-mask-image: none;\n\t\t}\n\t\t${(0,i.bi)(f.cssVarList)}\n\t\t${(0,i.PH)("vaadin-combo-box")}\n\t\t${(0,i.jI)("vaadin-combo-box")}\n\t\t${(0,i.Pd)("vaadin-combo-box")}\n\n\t\tvaadin-combo-box {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\tvaadin-combo-box::before {\n\t\t\theight: initial;\n\t\t}\n\t\tvaadin-combo-box [slot="input"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\tvaadin-combo-box::part(input-field) {\n\t\t\tpadding: 0;\n\t\t\tbox-shadow: none;\n\t\t}\n\n    vaadin-combo-box::part(toggle-button),\n    vaadin-combo-box::part(clear-button) {\n      align-self: center;\n    }\n\n    vaadin-combo-box[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n      opacity: 0;\n    }\n    vaadin-combo-box[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n      opacity: 0;\n    }\n  \n    ${(0,i.Wf)("vaadin-combo-box")}\n    ${(0,i.bz)()}\n\t\t`,excludeAttrsSync:["tabindex","size","data"],componentName:l,includeForwardProps:["items","renderer","selectedItem"]}))},21294:(t,e,o)=>{o.r(e),o.d(e,{ComboBoxClass:()=>n.H}),o(47583);var n=o(84049);customElements.define(n.f,n.H)},4963:(t,e,o)=>{o.d(e,{Z:()=>y,f:()=>l});var n=o(73878),r=o(54567),i=o(87262),a=o(22485);const l=(0,r.iY)("phone-field-internal"),s=["disabled","size","bordered","invalid","readonly"],p=["country-input-placeholder","default-code","restrict-countries"],d=["phone-input-placeholder","maxlength","autocomplete","name"],u=["label-type","country-input-label","label"],c={"country-input-label":"label","country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},h=[].concat(s,p,d,u),b=(0,n.P)({componentName:l,baseSelector:"div"}),y=class extends b{static get observedAttributes(){return[].concat(b.observedAttributes||[],h)}constructor(){super(),this.innerHTML=`\n    <div>\n      <descope-combo-box\n        item-label-path="data-name"\n        item-value-path="data-id"\n      >\n      ${i.Z.map((t=>(0,a.Vn)(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.oP)(this,this.countryCodeInput,{includeAttrs:["label-type"]}),(0,r.oP)(this,this.phoneNumberInput,{includeAttrs:["label-type","required"]}),this.countryCodeInput.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get value(){return this.phoneNumberValue?`${this.countryCodeInput.value}-${this.phoneNumberInput.value}`:""}set value(t){const[e,o]=(0,a.SR)(t);if(e){const t=this.getCountryByDialCode(e);t&&(this.countryCodeInput.selectedItem=t)}else this.countryCodeInput.selectedItem=void 0;this.phoneNumberInput.value=this.phoneNumberInput.value||o}get phoneNumberValue(){return this.phoneNumberInput.value}get countryCodeValue(){return this.countryCodeInput.shadowRoot.querySelector("input").value}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}getValidity(){const t=this.countryCodeInput.value,e=this.phoneNumberInput.value,o=!t||!e,n=this.phoneNumberInput.value?.length&&this.phoneNumberInput.value.length<this.minLength;return this.isRequired&&o?{valueMissing:!0}:n?{tooShort:!0}:e&&!t?{valueMissing:!0}:{}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[1].focus()})),super.init?.(),this.initInputs()}getRestrictedCountries(){return this.getAttribute("restrict-countries")?.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.Z.filter((e=>t.includes(e.code))):i.Z;this.querySelector("descope-combo-box").innerHTML=e.map((t=>(0,a.Vn)(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=>{const e=/^\d$/,o=t.target.value.split("").filter((t=>e.test(t))).join("");t.target.value=o})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}handleLabelTypeAttrs(t,e){const o=c[t]||t;"label-type"===t?this.onLabelTypeChange(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.countryCodeInput.setAttribute(o,e):"label"===t&&this.phoneNumberInput.setAttribute(o,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,o){if(super.attributeChangedCallback(t,e,o),e!==o){if("default-code"===t&&o)this.handleDefaultCountryCode(o);else if(h.includes(t)){const e=c[t]||t;s.includes(t)?this.inputs.forEach((t=>t.setAttribute(e,o))):p.includes(t)?this.countryCodeInput.setAttribute(e,o):d.includes(t)&&this.phoneNumberInput.setAttribute(e,o)}u.includes(t)&&this.handleLabelTypeAttrs(t,o),"restrict-countries"===t&&this.updateCountryCodeItems(this.getRestrictedCountries())}}}},99240:(t,e,o)=>{o.r(e),o(21294),o(19357);var n=o(4963);customElements.define(n.f,n.Z)},22485:(t,e,o)=>{o.d(e,{SR:()=>i,Vn:()=>r});var n=o(58096);const r=({code:t,dialCode:e,name:o})=>`\n\t<div\n\t\tstyle="display:flex; flex-direction: column;"\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${o}"\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>${o}</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 o="",r="";const i=(0,n.S)(e);if(i)i.countryCallingCode&&(o=`+${i.countryCallingCode}`),i.nationalNumber&&(r=i.nationalNumber);else{const[t,n]=e.split("-");o=t||"",r=n||""}return[o,r]}},76581:(t,e,o)=>{o.r(e),o.d(e,{PhoneFieldClass:()=>w}),o(99240),o(21294),o(19357);var n=o(4963),r=o(54567),i=o(2061),a=o(94978),l=o(56417),s=o(84049),p=o(87262),d=o(54201);const u=l.z.cssVarList,c=s.H.cssVarList,h=(0,r.iY)("phone-field"),{host:b,label:y,requiredIndicator:m,inputField:g,countryCodeInput:f,phoneInput:v,separator:x,errorMessage:C,helperText:I}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},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)"}},w=(0,i.qC)((0,a.yk)({mappings:{fontSize:[b,g,{selector:l.z.componentName,property:l.z.cssVarList.fontSize},{selector:s.H.componentName,property:s.H.cssVarList.fontSize}],fontFamily:[y,C,I,{...f,property:s.H.cssVarList.overlay.fontFamily}],hostWidth:[{...b,property:"width"},{...v,property:"width"},{...f,property:"--vaadin-combo-box-overlay-width"}],hostDirection:{...b,property:"direction"},inputBorderStyle:[{...g,property:"border-style"},{...x,property:"border-left-style"}],inputBorderWidth:[{...g,property:"border-width"},{...x,property:"border-left-width"}],inputBorderColor:[{...g,property:"border-color"},{...x,property:"border-left-color"}],inputBorderRadius:{...g,property:"border-radius"},countryCodeInputWidth:{...f,property:c.hostWidth},countryCodeDropdownWidth:{...f,property:"--vaadin-combo-box-overlay-width"},phoneInputWidth:{...v,property:"width"},horizontalPadding:[{...v,property:"padding-left"},{...v,property:"padding-right"},{...f,property:"padding-left"},{...f,property:"padding-right"}],labelTextColor:[{...y,property:"color"},{...m,property:"color"}],labelRequiredIndicator:{...m,property:"content"},errorMessageTextColor:{...C,property:"color"},inputValueTextColor:[{...v,property:u.inputValueTextColor},{...f,property:c.inputValueTextColor}],inputPlaceholderTextColor:{...v,property:u.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:[{...f,property:c.valueInputHeight}],valueInputMarginBottom:[{...v,property:u.valueInputMarginBottom}],marginInlineStart:[{...v,property:u.marginInlineStart},{...f,property:c.marginInlineStart}]}}),a.e4,(0,a.dj)({proxyProps:["value","selectionStart"]}),(t=>class extends t{static get CountryCodes(){return p.Z}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${n.f}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${n.f}>\n      \t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(n.f),(0,r.oP)(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"]})}}))((0,a.DM)({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,d.bi)(w.cssVarList)}\n\t\t\t${(0,d.Pd)("vaadin-text-field")}\n\t\t\t${(0,d.B)("vaadin-text-field")}\n\t\t\t${(0,d.DY)()}\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(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\t\t\t}\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\t\t\t\tmin-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${u.inputOutlineWidth}: 0;\n\t\t\t\t${u.inputOutlineOffset}: 0;\n\t\t\t\t${u.inputBorderWidth}: 0;\n\t\t\t\t${u.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,d.Wf)("vaadin-text-field")}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:h}));customElements.define(h,w)}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[9894,2878],{78313:(t,e,n)=>{n.d(e,{C:()=>v,T:()=>l});var o=n(7138),r=n(14944),i=n(33177),a=n(94619);const l=(0,r.xE)("combo-box"),{host:s,inputField:d,inputElement:p,placeholder:u,toggle:c,clearButton:h,label:b,requiredIndicator:y,helperText:m,errorMessage:g}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"input"},placeholder:{selector:"> input:placeholder-shown"},toggle:{selector:"::part(toggle-button)"},clearButton:{selector:"::part(clear-button)"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},v=(0,o.Zz)((0,a.RF)({mappings:{hostWidth:{...s,property:"width"},hostDirection:{...s,property:"direction"},fontSize:[{},s],fontFamily:[b,u,d,m,g],labelFontSize:{...b,property:"font-size"},labelFontWeight:{...b,property:"font-weight"},labelTextColor:[{...b,property:"color"},{...y,property:"color"}],errorMessageTextColor:{...g,property:"color"},inputHeight:{...d,property:"height"},inputBackgroundColor:{...d,property:"background-color"},inputBorderColor:{...d,property:"border-color"},inputBorderWidth:{...d,property:"border-width"},inputBorderStyle:{...d,property:"border-style"},inputBorderRadius:{...d,property:"border-radius"},labelRequiredIndicator:{...y,property:"content"},inputValueTextColor:{...d,property:"color"},inputPlaceholderTextColor:{...u,property:"color"},inputDropdownButtonCursor:[{...c,property:"cursor"},{...h,property:"cursor"}],inputDropdownButtonColor:[{...c,property:"color"},{...h,property:"color"}],inputDropdownButtonSize:[{...c,property:"font-size"},{...h,property:"font-size"}],inputDropdownButtonOffset:[{...c,property:"margin-right"},{...c,property:"margin-left"}],inputOutlineColor:{...d,property:"outline-color"},inputOutlineWidth:{...d,property:"outline-width"},inputOutlineStyle:{...d,property:"outline-style"},inputOutlineOffset:{...d,property:"outline-offset"},inputHorizontalPadding:[{...p,property:"padding-left"},{...p,property:"padding-right"}],labelPosition:{...b,property:"position"},labelTopPosition:{...b,property:"top"},labelHorizontalPosition:[{...b,property:"left"},{...b,property:"right"}],inputTransformY:{...b,property:"transform"},inputTransition:{...b,property:"transition"},marginInlineStart:{...b,property:"margin-inline-start"},placeholderOpacity:{...u,property:"opacity"},inputVerticalAlignment:{...d,property:"align-items"},valueInputHeight:{...p,property:"height"},valueInputMarginBottom:{...p,property:"margin-bottom"},overlayBackground:{property:()=>v.cssVarList.overlay.backgroundColor},overlayTextColor:{property:()=>v.cssVarList.overlay.textColor},overlayBorder:{property:()=>v.cssVarList.overlay.border},overlayFontSize:{property:()=>v.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>v.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>v.cssVarList.overlay.cursor},overlayItemBoxShadow:{property:()=>v.cssVarList.overlay.itemBoxShadow},overlayItemPaddingInlineStart:{property:()=>v.cssVarList.overlay.itemPaddingInlineStart},overlayItemPaddingInlineEnd:{property:()=>v.cssVarList.overlay.itemPaddingInlineEnd}}}),a.VO,(0,a.mA)({name:"overlay",selector:"",mappings:{backgroundColor:{selector:"vaadin-combo-box-scroller"},minHeight:{selector:"vaadin-combo-box-overlay"},margin:{selector:"vaadin-combo-box-overlay"},cursor:{selector:"vaadin-combo-box-item"},fontFamily:{selector:"vaadin-combo-box-item"},textColor:{selector:"vaadin-combo-box-item",property:"color"},fontSize:{selector:"vaadin-combo-box-item"},itemBoxShadow:{selector:"vaadin-combo-box-item",property:"box-shadow"},itemPaddingInlineStart:{selector:"vaadin-combo-box-item",property:"padding-inline-start"},itemPaddingInlineEnd:{selector:"vaadin-combo-box-item",property:"padding-inline-end"}},forward:{include:!1,attributes:["size"]}}),(0,a.OZ)({proxyProps:["selectionStart"],inputEvent:"selected-item-changed"}),a.tQ,(t=>class extends t{static get observedAttributes(){return["label-type"]}#t=({displayName:t,value:e,label:n})=>`<span data-name="${n}" data-id="${e}">${t||n}</span>`;#e;get defaultValue(){return this.getAttribute("default-value")}get renderItem(){return this.#t}set renderItem(t){this.#t=t,this.renderItems()}get data(){if(this.#e)return this.#e;const t=this.getAttribute("data");if(t)try{const e=JSON.parse(t);if(this.isValidDataType(e))return e}catch(t){console.error('could not parse data string from attribute "data" -',t.message)}return[]}set data(t){this.isValidDataType(t)&&(this.#e=t,this.renderItems())}isValidDataType(t){const e=Array.isArray(t);return e||console.error("data must be an array, received:",t),e}getItemsTemplate(){return this.data?.reduce?.(((t,e)=>t+(this.renderItem?.(e||{})||"")),"")}renderItems(){const t=this.getItemsTemplate();t&&(this.innerHTML=t)}handleSelectedItem(){const t=this.baseElement.selectedItem?.["data-id"];this.baseElement.selectedItem=void 0,t&&(this.value=t),this.value||this.setDefaultValue()}customValueTransformFn(t){return t}setComboBoxDescriptor(){const t=Object.getOwnPropertyDescriptor(this.inputElement.constructor.prototype,"value"),e=this;Object.defineProperties(this.inputElement,{value:{...t,set(n){if(!e.baseElement.items?.length)return;const o=e.customValueTransformFn(n)||"";o!==this.value&&t.set.call(this,o)}}})}#n(){const t=this.shadowRoot.querySelector(this.baseSelector),e=Array.from(this.children);e.length&&(e.forEach((t=>{Object.defineProperty(t,"data-name",{value:t.getAttribute("data-name"),configurable:!0,writable:!0}),Object.defineProperty(t,"data-id",{value:t.getAttribute("data-id"),configurable:!0,writable:!0})})),t.items=e,setTimeout((()=>{this.handleSelectedItem()}),0)),t.renderer=(t,e,n)=>{t.innerHTML=n.item.outerHTML}}#o(){const t=this.baseElement.shadowRoot.querySelector("vaadin-combo-box-overlay");t._attachOverlay=()=>{t.bringToFront()},t._detachOverlay=()=>{},t._enterModalState=()=>{}}init(){super.init?.(),this.getValidity=function(){return!this.value&&this.isRequired?{valueMissing:!0}:{}},this.setComboBoxDescriptor(),this.#o(),this.renderItems(),(0,r.mx)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,r.Ge)(this,this.#n.bind(this)),this.setDefaultValue(),this.baseElement.addEventListener("selected-item-changed",(()=>{this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}))}onLabelClick(){this.isReadOnly||this.isDisabled||(this.focus(),this.setAttribute("opened","true"))}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&"label-type"===t&&("floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick))}setDefaultValue(){this.value=this.defaultValue}set value(t){if(t){const e=this.baseElement.items?.find((e=>e["data-id"]===t));e&&(this.baseElement.selectedItem=e)}else this.baseElement.selectedItem=void 0}get value(){return(this.baseElement.selectedItem?.["data-id"]||this.allowCustomValue)&&this.baseElement.__data.value||""}get allowCustomValue(){return"true"===this.getAttribute("allow-custom-value")}}))((0,a.tz)({slots:["","prefix"],wrappedEleName:"vaadin-combo-box",style:()=>`\n\t\t:host {\n\t\t\tdisplay: inline-flex;\n\t\t\tbox-sizing: border-box;\n\t\t\t-webkit-mask-image: none;\n\t\t}\n\t\t${(0,i.cy)(v.cssVarList)}\n\t\t${(0,i.fu)("vaadin-combo-box")}\n\t\t${(0,i.lS)("vaadin-combo-box")}\n\t\t${(0,i.I4)("vaadin-combo-box")}\n\n\t\tvaadin-combo-box {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\tvaadin-combo-box::before {\n\t\t\theight: initial;\n\t\t}\n\t\tvaadin-combo-box [slot="input"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\tvaadin-combo-box::part(input-field) {\n\t\t\tpadding: 0;\n\t\t\tbox-shadow: none;\n\t\t}\n\n    vaadin-combo-box::part(toggle-button),\n    vaadin-combo-box::part(clear-button) {\n      align-self: center;\n    }\n\n    vaadin-combo-box[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n      opacity: 0;\n    }\n    vaadin-combo-box[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n      opacity: 0;\n    }\n  \n    ${(0,i.$J)("vaadin-combo-box")}\n    ${(0,i.Kl)()}\n\t\t`,excludeAttrsSync:["tabindex","size","data"],componentName:l,includeForwardProps:["items","renderer","selectedItem"]}))},4480:(t,e,n)=>{n.r(e),n.d(e,{ComboBoxClass:()=>o.C}),n(31111);var o=n(78313);customElements.define(o.T,o.C)},69473:(t,e,n)=>{n.d(e,{T:()=>s,w:()=>p});var o=n(94619),r=n(93826),i=n(7138),a=n(14944),l=n(33177);const s=(0,a.xE)("text-field"),d=["type","label-type","copy-to-clipboard"],p=(0,i.Zz)((0,o.RF)({mappings:r.A}),o.VO,(0,o.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),o.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,o.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:()=>o.w}),n(39542),n(66418),n(56637);var o=n(69473);customElements.define(o.T,o.w)},32413:(t,e,n)=>{n.d(e,{A:()=>y,T:()=>l});var o=n(25827),r=n(14944),i=n(44066),a=n(41611);const l=(0,r.xE)("phone-field-internal"),s=["disabled","size","bordered","invalid","readonly"],d=["country-input-placeholder","default-code","restrict-countries"],p=["phone-input-placeholder","maxlength","autocomplete","name"],u=["label-type","country-input-label","label"],c={"country-input-label":"label","country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},h=[].concat(s,d,p,u),b=(0,o.y)({componentName:l,baseSelector:"div"}),y=class extends b{static get observedAttributes(){return[].concat(b.observedAttributes||[],h)}constructor(){super(),this.innerHTML=`\n    <div>\n      <descope-combo-box\n        item-label-path="data-name"\n        item-value-path="data-id"\n      >\n      ${i.A.map((t=>(0,a.$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 value(){return this.phoneNumberValue?`${this.countryCodeInput.value}-${this.phoneNumberInput.value}`:""}set value(t){const[e,n]=(0,a.lq)(t);if(e){const t=this.getCountryByDialCode(e);t&&(this.countryCodeInput.selectedItem=t)}else this.countryCodeInput.selectedItem=void 0;this.phoneNumberInput.value=this.phoneNumberInput.value||n}get phoneNumberValue(){return this.phoneNumberInput.value}get countryCodeValue(){return this.countryCodeInput.shadowRoot.querySelector("input").value}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(){return this.getAttribute("restrict-countries")?.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,a.$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=>{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))):d.includes(t)?this.countryCodeInput.setAttribute(e,n):p.includes(t)&&this.phoneNumberInput.setAttribute(e,n)}u.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]}},18638:(t,e,n)=>{n.r(e),n.d(e,{PhoneFieldClass:()=>w}),n(54930),n(4480),n(89348);var o=n(32413),r=n(14944),i=n(7138),a=n(94619),l=n(69473),s=n(78313),d=n(44066),p=n(33177);const u=l.w.cssVarList,c=s.C.cssVarList,h=(0,r.xE)("phone-field"),{host:b,label:y,requiredIndicator:m,inputField:g,countryCodeInput:v,phoneInput:f,separator:x,errorMessage:C,helperText:I}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},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)"}},w=(0,i.Zz)((0,a.RF)({mappings:{fontSize:[b,g,{selector:l.w.componentName,property:l.w.cssVarList.fontSize},{selector:s.C.componentName,property:s.C.cssVarList.fontSize}],fontFamily:[y,C,I,{...v,property:s.C.cssVarList.overlay.fontFamily}],hostWidth:[{...b,property:"width"},{...f,property:"width"},{...v,property:"--vaadin-combo-box-overlay-width"}],hostDirection:{...b,property:"direction"},inputBorderStyle:[{...g,property:"border-style"},{...x,property:"border-left-style"}],inputBorderWidth:[{...g,property:"border-width"},{...x,property:"border-left-width"}],inputBorderColor:[{...g,property:"border-color"},{...x,property:"border-left-color"}],inputBorderRadius:{...g,property:"border-radius"},countryCodeInputWidth:{...v,property:c.hostWidth},countryCodeDropdownWidth:{...v,property:"--vaadin-combo-box-overlay-width"},phoneInputWidth:{...f,property:"width"},horizontalPadding:[{...f,property:"padding-left"},{...f,property:"padding-right"},{...v,property:"padding-left"},{...v,property:"padding-right"}],labelTextColor:[{...y,property:"color"},{...m,property:"color"}],labelRequiredIndicator:{...m,property:"content"},errorMessageTextColor:{...C,property:"color"},inputValueTextColor:[{...f,property:u.inputValueTextColor},{...v,property:c.inputValueTextColor}],inputPlaceholderTextColor:{...f,property:u.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:[{...v,property:c.valueInputHeight}],valueInputMarginBottom:[{...f,property:u.valueInputMarginBottom}],marginInlineStart:[{...f,property:u.marginInlineStart},{...v,property:c.marginInlineStart}]}}),a.VO,(0,a.OZ)({proxyProps:["value","selectionStart"]}),(t=>class extends t{static get CountryCodes(){return d.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"]})}}))((0,a.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,p.cy)(w.cssVarList)}\n\t\t\t${(0,p.I4)("vaadin-text-field")}\n\t\t\t${(0,p.kG)("vaadin-text-field")}\n\t\t\t${(0,p.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(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\t\t\t}\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\t\t\t\tmin-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${u.inputOutlineWidth}: 0;\n\t\t\t\t${u.inputOutlineOffset}: 0;\n\t\t\t\t${u.inputBorderWidth}: 0;\n\t\t\t\t${u.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,p.$J)("vaadin-text-field")}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:h}));customElements.define(h,w)}}]);

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([[4981],{41377:(t,e,n)=>{n.d(e,{Z:()=>d,f:()=>r});var i=n(73878),a=n(54567),s=n(16418);const r=(0,a.iY)("phone-field-internal-input-box"),l=["disabled","size","bordered","invalid","readonly","phone-input-placeholder","name","autocomplete","label-type"],u={"phone-input-placeholder":"placeholder"},o=(0,i.P)({componentName:r,baseSelector:"div"}),d=class extends o{static get observedAttributes(){return[].concat(o.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,s.g)(this.getAttribute("default-code"))}get hasDefaultCode(){return!!this.getAttribute("default-code")}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 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("+-","+");const e=/^[+\d-]+$/,n=t.target.value.split("").filter((t=>e.test(t))).join("");t.target.value=n})),this.handleFocusEventsDispatching([this.phoneNumberInput]),this.handleInputEventDispatching()}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n&&l.includes(t)){const e=u[t]||t;this.phoneNumberInput.setAttribute(e,n)}}}},83067:(t,e,n)=>{n.r(e),n(19357);var i=n(41377);customElements.define(i.f,i.Z)},16418:(t,e,n)=>{n.d(e,{g:()=>a});var i=n(87262);const a=t=>i.Z.find((e=>e.code===t))?.dialCode},73208:(t,e,n)=>{n.d(e,{b:()=>a});var i=n(78591);class a extends i.n{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})}}},20422:(t,e,n)=>{n.d(e,{j:()=>a});var i=n(73406);const a=t=>class extends((0,i.L)(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()}}},18005:(t,e,n)=>{n.d(e,{n:()=>c}),n(13553);var i=n(3354),a=n(52807),s=n(12521),r=n(34463),l=n(62743),u=n(46570),o=n(73208),d=n(20422),p=n(46729);const h=t=>class extends((0,d.j)(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.b(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new p.v(this.inputElement,this._labelController))}};(0,u.hC)("vaadin-text-field",l.J,{moduleId:"vaadin-text-field-styles"});class c extends(h((0,u.Tb)((0,s.S)(i.H3)))){static get is(){return"vaadin-text-field"}static get template(){return i.dy`
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[8657],{69473:(t,e,i)=>{i.d(e,{T:()=>o,w:()=>d});var n=i(94619),a=i(93826),s=i(7138),r=i(14944),l=i(33177);const o=(0,r.xE)("text-field"),u=["type","label-type","copy-to-clipboard"],d=(0,s.Zz)((0,n.RF)({mappings:a.A}),n.VO,(0,n.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),n.tQ,(t=>class extends t{static get observedAttributes(){return u.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"},i={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,i),setTimeout((()=>{Object.assign(this.icon,e)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(t,e,i){super.attributeChangeCallback?.(t,e,i),"type"===t&&this.baseElement._setType(i),e!==i&&("label-type"===t?"floating"===i?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===i))}}))((0,n.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(${d.cssVarList.inputOutlineWidth}) + var(${d.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)(d.cssVarList)}\n\t\t\t${(0,l.LJ)("vaadin-text-field",d.cssVarList)}\n      ${(0,l.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:o}))},89348:(t,e,i)=>{i.r(e),i.d(e,{TextFieldClass:()=>n.w}),i(39542),i(66418),i(56637);var n=i(69473);customElements.define(n.T,n.w)},43945:(t,e,i)=>{i.d(e,{A:()=>d,T:()=>r});var n=i(25827),a=i(14944),s=i(63789);const r=(0,a.xE)("phone-field-internal-input-box"),l=["disabled","size","bordered","invalid","readonly","phone-input-placeholder","name","autocomplete","label-type"],o={"phone-input-placeholder":"placeholder"},u=(0,n.y)({componentName:r,baseSelector:"div"}),d=class extends u{static get observedAttributes(){return[].concat(u.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,s.Q)(this.getAttribute("default-code"))}get hasDefaultCode(){return!!this.getAttribute("default-code")}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 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("+-","+");const e=/^[+\d-]+$/,i=t.target.value.split("").filter((t=>e.test(t))).join("");t.target.value=i})),this.handleFocusEventsDispatching([this.phoneNumberInput]),this.handleInputEventDispatching()}attributeChangedCallback(t,e,i){if(super.attributeChangedCallback(t,e,i),e!==i&&l.includes(t)){const e=o[t]||t;this.phoneNumberInput.setAttribute(e,i)}}}},46633:(t,e,i)=>{i.r(e),i(89348);var n=i(43945);customElements.define(n.T,n.A)},63789:(t,e,i)=>{i.d(e,{Q:()=>a});var n=i(44066);const a=t=>n.A.find((e=>e.code===t))?.dialCode},15408:(t,e,i)=>{i.d(e,{f:()=>a});var n=i(32065);class a extends n.r{constructor(t,e){super(t,"input","input",{initializer:(t,i)=>{i.value&&(t.value=i.value),i.type&&t.setAttribute("type",i.type),t.id=this.defaultId,"function"==typeof e&&e(t)},useUniqueId:!0})}}},53430:(t,e,i)=>{i.d(e,{a:()=>a});var n=i(32318);const a=t=>class extends((0,n.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,i)=>{i.d(e,{A:()=>h}),i(9077);var n=i(33791),a=i(38735),s=i(31846),r=i(58074),l=i(89385),o=i(6052),u=i(15408),d=i(53430),p=i(3550);const c=t=>class extends((0,d.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 u.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",l.k,{moduleId:"vaadin-text-field-styles"});class h extends(c((0,o.cp)((0,s.q)(n.Pu)))){static get is(){return"vaadin-text-field"}static get template(){return n.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.f(this),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this.addController(this._tooltipController)}}(0,a.M)(c)},58725:(t,e,n)=>{n(21578);var i=n(83208);(0,n(46570).hC)("vaadin-text-field",i.J,{moduleId:"lumo-text-field-styles"}),n(18005)},79789:(t,e,n)=>{n(58725),n(18005)}}]);
+    `}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,i)=>{i(37451);var n=i(90500);(0,i(6052).SF)("vaadin-text-field",n.k,{moduleId:"lumo-text-field-styles"}),i(34068)},39542:(t,e,i)=>{i(70297),i(34068)}}]);

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

@@ -1 +1 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[5119],{84049:(e,t,r)=>{r.d(t,{H:()=>f,f:()=>l});var o=r(2061),n=r(54567),i=r(54201),a=r(94978);const l=(0,n.iY)("combo-box"),{host:s,inputField:p,inputElement:d,placeholder:u,toggle:c,clearButton:h,label:b,requiredIndicator:m,helperText:y,errorMessage:g}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"input"},placeholder:{selector:"> input:placeholder-shown"},toggle:{selector:"::part(toggle-button)"},clearButton:{selector:"::part(clear-button)"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},f=(0,o.qC)((0,a.yk)({mappings:{hostWidth:{...s,property:"width"},hostDirection:{...s,property:"direction"},fontSize:[{},s],fontFamily:[b,u,p,y,g],labelFontSize:{...b,property:"font-size"},labelFontWeight:{...b,property:"font-weight"},labelTextColor:[{...b,property:"color"},{...m,property:"color"}],errorMessageTextColor:{...g,property:"color"},inputHeight:{...p,property:"height"},inputBackgroundColor:{...p,property:"background-color"},inputBorderColor:{...p,property:"border-color"},inputBorderWidth:{...p,property:"border-width"},inputBorderStyle:{...p,property:"border-style"},inputBorderRadius:{...p,property:"border-radius"},labelRequiredIndicator:{...m,property:"content"},inputValueTextColor:{...p,property:"color"},inputPlaceholderTextColor:{...u,property:"color"},inputDropdownButtonCursor:[{...c,property:"cursor"},{...h,property:"cursor"}],inputDropdownButtonColor:[{...c,property:"color"},{...h,property:"color"}],inputDropdownButtonSize:[{...c,property:"font-size"},{...h,property:"font-size"}],inputDropdownButtonOffset:[{...c,property:"margin-right"},{...c,property:"margin-left"}],inputOutlineColor:{...p,property:"outline-color"},inputOutlineWidth:{...p,property:"outline-width"},inputOutlineStyle:{...p,property:"outline-style"},inputOutlineOffset:{...p,property:"outline-offset"},inputHorizontalPadding:[{...d,property:"padding-left"},{...d,property:"padding-right"}],labelPosition:{...b,property:"position"},labelTopPosition:{...b,property:"top"},labelHorizontalPosition:[{...b,property:"left"},{...b,property:"right"}],inputTransformY:{...b,property:"transform"},inputTransition:{...b,property:"transition"},marginInlineStart:{...b,property:"margin-inline-start"},placeholderOpacity:{...u,property:"opacity"},inputVerticalAlignment:{...p,property:"align-items"},valueInputHeight:{...d,property:"height"},valueInputMarginBottom:{...d,property:"margin-bottom"},overlayBackground:{property:()=>f.cssVarList.overlay.backgroundColor},overlayTextColor:{property:()=>f.cssVarList.overlay.textColor},overlayBorder:{property:()=>f.cssVarList.overlay.border},overlayFontSize:{property:()=>f.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>f.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>f.cssVarList.overlay.cursor},overlayItemBoxShadow:{property:()=>f.cssVarList.overlay.itemBoxShadow},overlayItemPaddingInlineStart:{property:()=>f.cssVarList.overlay.itemPaddingInlineStart},overlayItemPaddingInlineEnd:{property:()=>f.cssVarList.overlay.itemPaddingInlineEnd}}}),a.e4,(0,a.Iw)({name:"overlay",selector:"",mappings:{backgroundColor:{selector:"vaadin-combo-box-scroller"},minHeight:{selector:"vaadin-combo-box-overlay"},margin:{selector:"vaadin-combo-box-overlay"},cursor:{selector:"vaadin-combo-box-item"},fontFamily:{selector:"vaadin-combo-box-item"},textColor:{selector:"vaadin-combo-box-item",property:"color"},fontSize:{selector:"vaadin-combo-box-item"},itemBoxShadow:{selector:"vaadin-combo-box-item",property:"box-shadow"},itemPaddingInlineStart:{selector:"vaadin-combo-box-item",property:"padding-inline-start"},itemPaddingInlineEnd:{selector:"vaadin-combo-box-item",property:"padding-inline-end"}},forward:{include:!1,attributes:["size"]}}),(0,a.dj)({proxyProps:["selectionStart"],inputEvent:"selected-item-changed"}),a.Ae,(e=>class extends e{static get observedAttributes(){return["label-type"]}#e=({displayName:e,value:t,label:r})=>`<span data-name="${r}" data-id="${t}">${e||r}</span>`;#t;get defaultValue(){return this.getAttribute("default-value")}get renderItem(){return this.#e}set renderItem(e){this.#e=e,this.renderItems()}get data(){if(this.#t)return this.#t;const e=this.getAttribute("data");if(e)try{const t=JSON.parse(e);if(this.isValidDataType(t))return t}catch(e){console.error('could not parse data string from attribute "data" -',e.message)}return[]}set data(e){this.isValidDataType(e)&&(this.#t=e,this.renderItems())}isValidDataType(e){const t=Array.isArray(e);return t||console.error("data must be an array, received:",e),t}getItemsTemplate(){return this.data?.reduce?.(((e,t)=>e+(this.renderItem?.(t||{})||"")),"")}renderItems(){const e=this.getItemsTemplate();e&&(this.innerHTML=e)}handleSelectedItem(){const e=this.baseElement.selectedItem?.["data-id"];this.baseElement.selectedItem=void 0,e&&(this.value=e),this.value||this.setDefaultValue()}customValueTransformFn(e){return e}setComboBoxDescriptor(){const e=Object.getOwnPropertyDescriptor(this.inputElement.constructor.prototype,"value"),t=this;Object.defineProperties(this.inputElement,{value:{...e,set(r){if(!t.baseElement.items?.length)return;const o=t.customValueTransformFn(r)||"";o!==this.value&&e.set.call(this,o)}}})}#r(){const e=this.shadowRoot.querySelector(this.baseSelector),t=Array.from(this.children);t.length&&(t.forEach((e=>{Object.defineProperty(e,"data-name",{value:e.getAttribute("data-name"),configurable:!0,writable:!0}),Object.defineProperty(e,"data-id",{value:e.getAttribute("data-id"),configurable:!0,writable:!0})})),e.items=t,setTimeout((()=>{this.handleSelectedItem()}),0)),e.renderer=(e,t,r)=>{e.innerHTML=r.item.outerHTML}}#o(){const e=this.baseElement.shadowRoot.querySelector("vaadin-combo-box-overlay");e._attachOverlay=()=>{e.bringToFront()},e._detachOverlay=()=>{},e._enterModalState=()=>{}}init(){super.init?.(),this.getValidity=function(){return!this.value&&this.isRequired?{valueMissing:!0}:{}},this.setComboBoxDescriptor(),this.#o(),this.renderItems(),(0,n.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,n.P$)(this,this.#r.bind(this)),this.setDefaultValue(),this.baseElement.addEventListener("selected-item-changed",(()=>{this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}))}onLabelClick(){this.isReadOnly||this.isDisabled||(this.focus(),this.setAttribute("opened","true"))}attributeChangedCallback(e,t,r){super.attributeChangedCallback?.(e,t,r),t!==r&&"label-type"===e&&("floating"===r?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick))}setDefaultValue(){this.value=this.defaultValue}set value(e){if(e){const t=this.baseElement.items?.find((t=>t["data-id"]===e));t&&(this.baseElement.selectedItem=t)}else this.baseElement.selectedItem=void 0}get value(){return(this.baseElement.selectedItem?.["data-id"]||this.allowCustomValue)&&this.baseElement.__data.value||""}get allowCustomValue(){return"true"===this.getAttribute("allow-custom-value")}}))((0,a.DM)({slots:["","prefix"],wrappedEleName:"vaadin-combo-box",style:()=>`\n\t\t:host {\n\t\t\tdisplay: inline-flex;\n\t\t\tbox-sizing: border-box;\n\t\t\t-webkit-mask-image: none;\n\t\t}\n\t\t${(0,i.bi)(f.cssVarList)}\n\t\t${(0,i.PH)("vaadin-combo-box")}\n\t\t${(0,i.jI)("vaadin-combo-box")}\n\t\t${(0,i.Pd)("vaadin-combo-box")}\n\n\t\tvaadin-combo-box {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\tvaadin-combo-box::before {\n\t\t\theight: initial;\n\t\t}\n\t\tvaadin-combo-box [slot="input"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\tvaadin-combo-box::part(input-field) {\n\t\t\tpadding: 0;\n\t\t\tbox-shadow: none;\n\t\t}\n\n    vaadin-combo-box::part(toggle-button),\n    vaadin-combo-box::part(clear-button) {\n      align-self: center;\n    }\n\n    vaadin-combo-box[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n      opacity: 0;\n    }\n    vaadin-combo-box[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n      opacity: 0;\n    }\n  \n    ${(0,i.Wf)("vaadin-combo-box")}\n    ${(0,i.bz)()}\n\t\t`,excludeAttrsSync:["tabindex","size","data"],componentName:l,includeForwardProps:["items","renderer","selectedItem"]}))},21294:(e,t,r)=>{r.r(t),r.d(t,{ComboBoxClass:()=>o.H}),r(47583);var o=r(84049);customElements.define(o.f,o.H)},41377:(e,t,r)=>{r.d(t,{Z:()=>d,f:()=>a});var o=r(73878),n=r(54567),i=r(16418);const a=(0,n.iY)("phone-field-internal-input-box"),l=["disabled","size","bordered","invalid","readonly","phone-input-placeholder","name","autocomplete","label-type"],s={"phone-input-placeholder":"placeholder"},p=(0,o.P)({componentName:a,baseSelector:"div"}),d=class extends p{static get observedAttributes(){return[].concat(p.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.g)(this.getAttribute("default-code"))}get hasDefaultCode(){return!!this.getAttribute("default-code")}get value(){if(!this.phoneNumberValue)return"";if(this.hasDefaultCode){const e=new RegExp(`\\+?${parseInt(this.defaultCountryCode,10)}--?`);return`${this.defaultCountryCode}-${this.phoneNumberInput.value.replace(e,"")}`}return this.phoneNumberInput.value}set value(e){this.phoneNumberInput.value=e}get phoneNumberValue(){return this.phoneNumberInput.value}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get maxLength(){return parseInt(this.getAttribute("maxlength"),10)||50}getValidity(){const e=this.value.replace(/\D/g,"");return this.isRequired&&!this.value?{valueMissing:!0}:e.length<this.minLength?{tooShort:!0}:e.length>this.maxLength?{tooLong:!0}:/^\+?\d{1,4}-?(?:\d-?){1,15}$/.test(this.value)?{}:{patternMismatch:!0}}init(){this.addEventListener("focus",(e=>{e.isTrusted&&this.phoneNumberInput.focus()})),super.init?.(),this.initInputs()}getCountryByDialCode(e){return this.countryCodeInput.items?.find((t=>t.getAttribute("data-country-code")===e))}initInputs(){this.phoneNumberInput.addEventListener("input",(e=>{1===e.target.value.length&&"-"===e.target.value&&(e.target.value=""),e.target.value=e.target.value.replace(/(?!^)\+/g,"").replace("--","-").replace("+-","+");const t=/^[+\d-]+$/,r=e.target.value.split("").filter((e=>t.test(e))).join("");e.target.value=r})),this.handleFocusEventsDispatching([this.phoneNumberInput]),this.handleInputEventDispatching()}attributeChangedCallback(e,t,r){if(super.attributeChangedCallback(e,t,r),t!==r&&l.includes(e)){const t=s[e]||e;this.phoneNumberInput.setAttribute(t,r)}}}},83067:(e,t,r)=>{r.r(t),r(19357);var o=r(41377);customElements.define(o.f,o.Z)},69423:(e,t,r)=>{r.r(t),r.d(t,{PhoneFieldInputBoxClass:()=>x}),r(83067),r(21294),r(19357);var o=r(41377),n=r(54567),i=r(2061),a=r(94978),l=r(56417),s=r(87262),p=r(54201);const d=l.z.cssVarList,u=(0,n.iY)("phone-input-box-field"),{host:c,label:h,inputElement:b,requiredIndicator:m,inputField:y,phoneInput:g,errorMessage:f,helperText:v}={host:{selector:()=>":host"},label:{selector:"::part(label)"},placeholder:{selector:"> input:placeholder-shown"},inputElement:{selector:"input"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},phoneInput:{selector:()=>"descope-text-field"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},x=(0,i.qC)((0,a.yk)({mappings:{fontSize:[c,y,{selector:l.z.componentName,property:l.z.cssVarList.fontSize}],fontFamily:[h,f,v],hostWidth:{...c,property:"width"},hostMinWidth:{...c,property:"min-width"},hostDirection:{...c,property:"direction"},inputBorderStyle:{...y,property:"border-style"},inputBorderWidth:{...y,property:"border-width"},inputBorderColor:{...y,property:"border-color"},inputBorderRadius:{...y,property:"border-radius"},inputHorizontalPadding:[{...g,property:"padding-left"},{...g,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"},inputValueTextColor:{...g,property:d.inputValueTextColor},inputPlaceholderTextColor:{...g,property:d.inputPlaceholderColor},inputOutlineStyle:{...y,property:"outline-style"},inputOutlineColor:{...y,property:"outline-color"},inputOutlineWidth:{...y,property:"outline-width"},inputOutlineOffset:{...y,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.z.componentName,property:d.valueInputMarginBottom}}}),a.e4,(0,a.dj)({proxyProps:["value","selectionStart"]}),(e=>class extends e{static get CountryCodes(){return s.Z}init(){super.init?.();const e=document.createElement("template");e.innerHTML=`\n\t\t\t\t<${o.f}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${o.f}>\n      `,this.baseElement.appendChild(e.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.f),(0,n.oP)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","invalid","minlength","maxlength","default-code","disabled","phone-input-placeholder","label","label-type"]})}}))((0,a.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n    :host {\n      display: inline-flex;\n      max-width: 100%;\n      box-sizing: border-box;\n    }\n    ${(0,p.bi)(x.cssVarList)}\n    ${(0,p.Pd)("vaadin-text-field")}\n    ${(0,p.B)("vaadin-text-field")}\n    ${(0,p.DY)()}\n\n    vaadin-text-field {\n      width: 100%;\n      height: 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      height: 100%;\n    }\n    descope-phone-field-internal-input-box > div {\n      width: 100%;\n      height: 100%;\n    }\n    descope-phone-field-internal-input-box .separator {\n      flex: 0;\n      border: none;\n    }\n    descope-text-field {\n      flex-grow: 1;\n      width: 100%;\n      ${d.inputOutlineWidth}: 0;\n      ${d.inputOutlineOffset}: 0;\n      ${d.inputBorderWidth}: 0;\n      ${d.inputBorderRadius}: 0;\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,p.Wf)("vaadin-text-field")}\n    ${(0,p.bz)()}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:u}));customElements.define(u,x)},16418:(e,t,r)=>{r.d(t,{g:()=>n});var o=r(87262);const n=e=>o.Z.find((t=>t.code===e))?.dialCode}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[4043],{78313:(t,e,n)=>{n.d(e,{C:()=>v,T:()=>l});var r=n(7138),o=n(14944),i=n(33177),a=n(94619);const l=(0,o.xE)("combo-box"),{host:s,inputField:p,inputElement:d,placeholder:u,toggle:c,clearButton:h,label:b,requiredIndicator:m,helperText:y,errorMessage:g}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"input"},placeholder:{selector:"> input:placeholder-shown"},toggle:{selector:"::part(toggle-button)"},clearButton:{selector:"::part(clear-button)"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},v=(0,r.Zz)((0,a.RF)({mappings:{hostWidth:{...s,property:"width"},hostDirection:{...s,property:"direction"},fontSize:[{},s],fontFamily:[b,u,p,y,g],labelFontSize:{...b,property:"font-size"},labelFontWeight:{...b,property:"font-weight"},labelTextColor:[{...b,property:"color"},{...m,property:"color"}],errorMessageTextColor:{...g,property:"color"},inputHeight:{...p,property:"height"},inputBackgroundColor:{...p,property:"background-color"},inputBorderColor:{...p,property:"border-color"},inputBorderWidth:{...p,property:"border-width"},inputBorderStyle:{...p,property:"border-style"},inputBorderRadius:{...p,property:"border-radius"},labelRequiredIndicator:{...m,property:"content"},inputValueTextColor:{...p,property:"color"},inputPlaceholderTextColor:{...u,property:"color"},inputDropdownButtonCursor:[{...c,property:"cursor"},{...h,property:"cursor"}],inputDropdownButtonColor:[{...c,property:"color"},{...h,property:"color"}],inputDropdownButtonSize:[{...c,property:"font-size"},{...h,property:"font-size"}],inputDropdownButtonOffset:[{...c,property:"margin-right"},{...c,property:"margin-left"}],inputOutlineColor:{...p,property:"outline-color"},inputOutlineWidth:{...p,property:"outline-width"},inputOutlineStyle:{...p,property:"outline-style"},inputOutlineOffset:{...p,property:"outline-offset"},inputHorizontalPadding:[{...d,property:"padding-left"},{...d,property:"padding-right"}],labelPosition:{...b,property:"position"},labelTopPosition:{...b,property:"top"},labelHorizontalPosition:[{...b,property:"left"},{...b,property:"right"}],inputTransformY:{...b,property:"transform"},inputTransition:{...b,property:"transition"},marginInlineStart:{...b,property:"margin-inline-start"},placeholderOpacity:{...u,property:"opacity"},inputVerticalAlignment:{...p,property:"align-items"},valueInputHeight:{...d,property:"height"},valueInputMarginBottom:{...d,property:"margin-bottom"},overlayBackground:{property:()=>v.cssVarList.overlay.backgroundColor},overlayTextColor:{property:()=>v.cssVarList.overlay.textColor},overlayBorder:{property:()=>v.cssVarList.overlay.border},overlayFontSize:{property:()=>v.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>v.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>v.cssVarList.overlay.cursor},overlayItemBoxShadow:{property:()=>v.cssVarList.overlay.itemBoxShadow},overlayItemPaddingInlineStart:{property:()=>v.cssVarList.overlay.itemPaddingInlineStart},overlayItemPaddingInlineEnd:{property:()=>v.cssVarList.overlay.itemPaddingInlineEnd}}}),a.VO,(0,a.mA)({name:"overlay",selector:"",mappings:{backgroundColor:{selector:"vaadin-combo-box-scroller"},minHeight:{selector:"vaadin-combo-box-overlay"},margin:{selector:"vaadin-combo-box-overlay"},cursor:{selector:"vaadin-combo-box-item"},fontFamily:{selector:"vaadin-combo-box-item"},textColor:{selector:"vaadin-combo-box-item",property:"color"},fontSize:{selector:"vaadin-combo-box-item"},itemBoxShadow:{selector:"vaadin-combo-box-item",property:"box-shadow"},itemPaddingInlineStart:{selector:"vaadin-combo-box-item",property:"padding-inline-start"},itemPaddingInlineEnd:{selector:"vaadin-combo-box-item",property:"padding-inline-end"}},forward:{include:!1,attributes:["size"]}}),(0,a.OZ)({proxyProps:["selectionStart"],inputEvent:"selected-item-changed"}),a.tQ,(t=>class extends t{static get observedAttributes(){return["label-type"]}#t=({displayName:t,value:e,label:n})=>`<span data-name="${n}" data-id="${e}">${t||n}</span>`;#e;get defaultValue(){return this.getAttribute("default-value")}get renderItem(){return this.#t}set renderItem(t){this.#t=t,this.renderItems()}get data(){if(this.#e)return this.#e;const t=this.getAttribute("data");if(t)try{const e=JSON.parse(t);if(this.isValidDataType(e))return e}catch(t){console.error('could not parse data string from attribute "data" -',t.message)}return[]}set data(t){this.isValidDataType(t)&&(this.#e=t,this.renderItems())}isValidDataType(t){const e=Array.isArray(t);return e||console.error("data must be an array, received:",t),e}getItemsTemplate(){return this.data?.reduce?.(((t,e)=>t+(this.renderItem?.(e||{})||"")),"")}renderItems(){const t=this.getItemsTemplate();t&&(this.innerHTML=t)}handleSelectedItem(){const t=this.baseElement.selectedItem?.["data-id"];this.baseElement.selectedItem=void 0,t&&(this.value=t),this.value||this.setDefaultValue()}customValueTransformFn(t){return t}setComboBoxDescriptor(){const t=Object.getOwnPropertyDescriptor(this.inputElement.constructor.prototype,"value"),e=this;Object.defineProperties(this.inputElement,{value:{...t,set(n){if(!e.baseElement.items?.length)return;const r=e.customValueTransformFn(n)||"";r!==this.value&&t.set.call(this,r)}}})}#n(){const t=this.shadowRoot.querySelector(this.baseSelector),e=Array.from(this.children);e.length&&(e.forEach((t=>{Object.defineProperty(t,"data-name",{value:t.getAttribute("data-name"),configurable:!0,writable:!0}),Object.defineProperty(t,"data-id",{value:t.getAttribute("data-id"),configurable:!0,writable:!0})})),t.items=e,setTimeout((()=>{this.handleSelectedItem()}),0)),t.renderer=(t,e,n)=>{t.innerHTML=n.item.outerHTML}}#r(){const t=this.baseElement.shadowRoot.querySelector("vaadin-combo-box-overlay");t._attachOverlay=()=>{t.bringToFront()},t._detachOverlay=()=>{},t._enterModalState=()=>{}}init(){super.init?.(),this.getValidity=function(){return!this.value&&this.isRequired?{valueMissing:!0}:{}},this.setComboBoxDescriptor(),this.#r(),this.renderItems(),(0,o.mx)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,o.Ge)(this,this.#n.bind(this)),this.setDefaultValue(),this.baseElement.addEventListener("selected-item-changed",(()=>{this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}))}onLabelClick(){this.isReadOnly||this.isDisabled||(this.focus(),this.setAttribute("opened","true"))}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&"label-type"===t&&("floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick))}setDefaultValue(){this.value=this.defaultValue}set value(t){if(t){const e=this.baseElement.items?.find((e=>e["data-id"]===t));e&&(this.baseElement.selectedItem=e)}else this.baseElement.selectedItem=void 0}get value(){return(this.baseElement.selectedItem?.["data-id"]||this.allowCustomValue)&&this.baseElement.__data.value||""}get allowCustomValue(){return"true"===this.getAttribute("allow-custom-value")}}))((0,a.tz)({slots:["","prefix"],wrappedEleName:"vaadin-combo-box",style:()=>`\n\t\t:host {\n\t\t\tdisplay: inline-flex;\n\t\t\tbox-sizing: border-box;\n\t\t\t-webkit-mask-image: none;\n\t\t}\n\t\t${(0,i.cy)(v.cssVarList)}\n\t\t${(0,i.fu)("vaadin-combo-box")}\n\t\t${(0,i.lS)("vaadin-combo-box")}\n\t\t${(0,i.I4)("vaadin-combo-box")}\n\n\t\tvaadin-combo-box {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\tvaadin-combo-box::before {\n\t\t\theight: initial;\n\t\t}\n\t\tvaadin-combo-box [slot="input"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\tvaadin-combo-box::part(input-field) {\n\t\t\tpadding: 0;\n\t\t\tbox-shadow: none;\n\t\t}\n\n    vaadin-combo-box::part(toggle-button),\n    vaadin-combo-box::part(clear-button) {\n      align-self: center;\n    }\n\n    vaadin-combo-box[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n      opacity: 0;\n    }\n    vaadin-combo-box[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n      opacity: 0;\n    }\n  \n    ${(0,i.$J)("vaadin-combo-box")}\n    ${(0,i.Kl)()}\n\t\t`,excludeAttrsSync:["tabindex","size","data"],componentName:l,includeForwardProps:["items","renderer","selectedItem"]}))},4480:(t,e,n)=>{n.r(e),n.d(e,{ComboBoxClass:()=>r.C}),n(31111);var r=n(78313);customElements.define(r.T,r.C)},69473:(t,e,n)=>{n.d(e,{T:()=>s,w:()=>d});var r=n(94619),o=n(93826),i=n(7138),a=n(14944),l=n(33177);const s=(0,a.xE)("text-field"),p=["type","label-type","copy-to-clipboard"],d=(0,i.Zz)((0,r.RF)({mappings:o.A}),r.VO,(0,r.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),r.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,r.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(${d.cssVarList.inputOutlineWidth}) + var(${d.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)(d.cssVarList)}\n\t\t\t${(0,l.LJ)("vaadin-text-field",d.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:()=>r.w}),n(39542),n(66418),n(56637);var r=n(69473);customElements.define(r.T,r.w)},43945:(t,e,n)=>{n.d(e,{A:()=>d,T:()=>a});var r=n(25827),o=n(14944),i=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"],s={"phone-input-placeholder":"placeholder"},p=(0,r.y)({componentName:a,baseSelector:"div"}),d=class extends p{static get observedAttributes(){return[].concat(p.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 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 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("+-","+");const e=/^[+\d-]+$/,n=t.target.value.split("").filter((t=>e.test(t))).join("");t.target.value=n})),this.handleFocusEventsDispatching([this.phoneNumberInput]),this.handleInputEventDispatching()}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 r=n(43945);customElements.define(r.T,r.A)},65636:(t,e,n)=>{n.r(e),n.d(e,{PhoneFieldInputBoxClass:()=>x}),n(46633),n(4480),n(89348);var r=n(43945),o=n(14944),i=n(7138),a=n(94619),l=n(69473),s=n(44066),p=n(33177);const d=l.w.cssVarList,u=(0,o.xE)("phone-input-box-field"),{host:c,label:h,inputElement:b,requiredIndicator:m,inputField:y,phoneInput:g,errorMessage:v,helperText:f}={host:{selector:()=>":host"},label:{selector:"::part(label)"},placeholder:{selector:"> input:placeholder-shown"},inputElement:{selector:"input"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},phoneInput:{selector:()=>"descope-text-field"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},x=(0,i.Zz)((0,a.RF)({mappings:{fontSize:[c,y,{selector:l.w.componentName,property:l.w.cssVarList.fontSize}],fontFamily:[h,v,f],hostWidth:{...c,property:"width"},hostMinWidth:{...c,property:"min-width"},hostDirection:{...c,property:"direction"},inputBorderStyle:{...y,property:"border-style"},inputBorderWidth:{...y,property:"border-width"},inputBorderColor:{...y,property:"border-color"},inputBorderRadius:{...y,property:"border-radius"},inputHorizontalPadding:[{...g,property:"padding-left"},{...g,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:{...v,property:"color"},inputValueTextColor:{...g,property:d.inputValueTextColor},inputPlaceholderTextColor:{...g,property:d.inputPlaceholderColor},inputOutlineStyle:{...y,property:"outline-style"},inputOutlineColor:{...y,property:"outline-color"},inputOutlineWidth:{...y,property:"outline-width"},inputOutlineOffset:{...y,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:d.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<${r.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${r.T}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(r.T),(0,o.EA)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","invalid","minlength","maxlength","default-code","disabled","phone-input-placeholder","label","label-type"]})}}))((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,p.cy)(x.cssVarList)}\n    ${(0,p.I4)("vaadin-text-field")}\n    ${(0,p.kG)("vaadin-text-field")}\n    ${(0,p.X6)()}\n\n    vaadin-text-field {\n      width: 100%;\n      height: 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      height: 100%;\n    }\n    descope-phone-field-internal-input-box > div {\n      width: 100%;\n      height: 100%;\n    }\n    descope-phone-field-internal-input-box .separator {\n      flex: 0;\n      border: none;\n    }\n    descope-text-field {\n      flex-grow: 1;\n      width: 100%;\n      ${d.inputOutlineWidth}: 0;\n      ${d.inputOutlineOffset}: 0;\n      ${d.inputBorderWidth}: 0;\n      ${d.inputBorderRadius}: 0;\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,p.$J)("vaadin-text-field")}\n    ${(0,p.Kl)()}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:u}));customElements.define(u,x)},63789:(t,e,n)=>{n.d(e,{Q:()=>o});var r=n(44066);const o=t=>r.A.find((e=>e.code===t))?.dialCode}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.385",
+  "version": "1.0.387",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -98,7 +98,7 @@
     "@vaadin/notification": "24.3.4",
     "@vaadin/number-field": "24.3.4",
     "@vaadin/password-field": "24.3.4",
-    "@vaadin/popover": "24.5.0",
+    "@vaadin/popover": "24.5.3",
     "@vaadin/radio-group": "24.3.4",
     "@vaadin/text-area": "24.3.4",
     "@vaadin/text-field": "24.3.4",

package/src/components/descope-date-field/DateFieldClass.js

@@ -29,7 +29,7 @@ export const componentName = getComponentName('date-field');
 const BASE_SELECTOR = 'vaadin-popover';
 const BaseInputClass = createBaseInputClass({ componentName, baseSelector: BASE_SELECTOR });
 
-const dateFieldAttrs = ['format', 'opened', 'initial-value'];
+const dateFieldAttrs = ['format', 'opened', 'initial-value', 'readonly'];
 const calendarAttrs = ['years-range', 'calendar-months', 'calendar-weekdays'];
 const observedAttrs = [...dateFieldAttrs, ...calendarAttrs];
 
@@ -71,19 +71,16 @@ class RawDateFieldClass extends BaseInputClass {
         display: flex;
         align-self: center;
         z-index: 1;
+        height: 100%;
+        align-items: center;        
       }
 
-      descope-text-field .overlay-position-anchor {
-        position: absolute;
-        height: 100%;
-        width: 0;
-        z-index: 1;
+      :host([readonly="true"]) .toggle-calendar {
         pointer-events: none;
       }
     </style>
     <div>
       <descope-text-field>
-        <span slot="prefix" class="overlay-position-anchor"></span>
         <span slot="suffix" class="toggle-calendar">
           <descope-icon>${calendarIcon}</descope-icon>
         </span>
@@ -94,7 +91,6 @@ class RawDateFieldClass extends BaseInputClass {
 
     this.inputElement = this.shadowRoot.querySelector('descope-text-field');
     this.popoverToggleButton = this.inputElement.querySelector('.toggle-calendar');
-    this.overlayPositionAnchor = this.inputElement.querySelector('.overlay-position-anchor');
 
     this.oninvalid = () => {
       this.inputElement.setAttribute('invalid', 'true');
@@ -143,6 +139,17 @@ class RawDateFieldClass extends BaseInputClass {
     return this.overlay?.querySelector('descope-calendar');
   }
 
+  get isRTL() {
+    const computedStyleDirection = getComputedStyle(this.baseElement).getPropertyValue('direction');
+
+    if (computedStyleDirection) {
+      return computedStyleDirection === 'rtl';
+    }
+
+    // Fallback: If for some reason computed style was not calculated in time, fallback to check on attribute
+    return this.getAttribute('st-host-direction') === 'rtl';
+  }
+
   get value() {
     return this.timestamp;
   }
@@ -223,10 +230,8 @@ class RawDateFieldClass extends BaseInputClass {
   }
 
   initPopover() {
-    this.baseElement.target = this.overlayPositionAnchor;
     this.baseElement.trigger = ['click'];
     this.baseElement.withBackdrop = true;
-    this.baseElement.noCloseOnOutsideClick = true;
     this.baseElement.renderer = this.#popoverRenderer.bind(this);
 
     // block popover events from focusing/blurring the text-field
@@ -236,32 +241,64 @@ class RawDateFieldClass extends BaseInputClass {
     });
   }
 
+  #popoverPosStylesheet;
+
   #popoverRenderer(root) {
     // popoverRenderer should run only once, when the popover is first rendering.
     if (!root.firstChild) {
+      this.overlay.positionTarget = this.shadowRoot.querySelector('.toggle-calendar');
+
       root.appendChild(this.#getPopoverContent());
+
       // override vaadin's constructed stylesheet which hides the host element
       overrideConstructedStylesheet(this.baseElement);
 
-      // To prevent position flickering of the dialog we set opacity to 0
-      root.style.setProperty('opacity', '0');
+      this.backdrop.addEventListener('click', this.closePopover.bind(this));
+    }
+
+    // Hide overlay before adjusting position to prevent flickering
+    root.style.setProperty('visibility', 'hidden');
+
+    // Wait until overlay is ready
+    setTimeout(() => {
+      this.#adjustPopoverPosition(root);
+
+      // Show adjusted overlay
+      root.style.setProperty('visibility', 'visible');
+      this.updateCalendarView(root);
+    }, 100);
+  }
+
+  #adjustPopoverPosition() {
+    const popover = this.shadowRoot.querySelector('vaadin-popover').shadowRoot;
 
-      setTimeout(() => {
-        // on first render we adjust the a anchor element in the input
-        // so vaadin computes the popover position according to the anchor position
-        // (otherwise it will simply center the popover below the input).
-        this.#adjustOverlayPosition();
+    // Remove previously added stylesheets
+    this.#popoverPosStylesheet?.remove();
 
-        // remove opacity to show overlay
-        root.style.setProperty('opacity', '1');
+    const windowRect = document.body.getBoundingClientRect();
+    const inputRect = this.getBoundingClientRect();
+    const calendarRect = this.calendar.getBoundingClientRect();
 
-        // on outside click - close popover. this event runs once on popover first render
-        // and does not need to be cleared
-        this.backdrop.addEventListener('click', this.closePopover.bind(this));
-      });
+    const side = this.isRTL ? 'right' : 'left';
+    const offset = inputRect[side] - calendarRect[side];
+    const availableLeft = calendarRect.left;
+    const availableRight = windowRect.width - calendarRect.right;
+
+    let newOffset;
+    if (offset > 0) {
+      newOffset = Math.min(offset, availableRight);
+    } else {
+      newOffset = Math.min(Math.abs(offset), availableLeft) * -1;
     }
 
-    this.updateCalendarView();
+    this.#popoverPosStylesheet = document.createElement('style');
+    this.#popoverPosStylesheet.innerHTML = `
+      vaadin-popover-overlay::part(overlay) {
+        transform: translateX(${newOffset}px);
+      }
+    `;
+
+    popover.appendChild(this.#popoverPosStylesheet);
   }
 
   #getPopoverContent() {
@@ -277,17 +314,6 @@ class RawDateFieldClass extends BaseInputClass {
     return ele;
   }
 
-  #adjustOverlayPosition() {
-    const { width: inputEleWidth } = this.inputElement.getClientRects()[0];
-    const { width: calendarEleWidth } = this.calendar.getClientRects()[0];
-    const pos = inputEleWidth - calendarEleWidth / 2;
-    /* eslint-disable no-use-before-define */
-    this.overlayPositionAnchor.style.setProperty(
-      DateFieldClass.cssVarList.overlayAnchorPos,
-      `${pos}px`
-    );
-  }
-
   // the default vaadin behavior is to attach the overlay to the body when opened
   // we do not want that because it's difficult to style the overlay in this way
   // so we override it to open inside the shadow DOM
@@ -371,6 +397,10 @@ class RawDateFieldClass extends BaseInputClass {
   }
 
   onFocus() {
+    if (this.isReadOnly) {
+      return;
+    }
+
     if (!this.inputElement.value) {
       this.inputElement.value = this.format;
       this.setInputSelectionRange();
@@ -610,12 +640,10 @@ class RawDateFieldClass extends BaseInputClass {
   }
 }
 
-const { host, input, toggleButton, overlayAnchor, overlayAnchorRTL, overlay, backdrop } = {
+const { host, input, toggleButton, overlay, backdrop } = {
   host: { selector: () => ':host' },
   input: { selector: () => 'descope-text-field' },
   toggleButton: { selector: () => '.toggle-calendar' },
-  overlayAnchor: { selector: () => ':host .overlay-position-anchor' },
-  overlayAnchorRTL: { selector: ':host([st-host-direction="rtl"]) .overlay-position-anchor' },
   overlay: { selector: 'vaadin-popover-overlay::part(overlay)' },
   backdrop: { selector: 'vaadin-popover-overlay::part(backdrop)' },
 };
@@ -628,14 +656,9 @@ export const DateFieldClass = compose(
       hostWidth: { ...host, property: 'width' },
       hostDirection: { ...host, property: 'direction' },
       textAlign: { ...input, property: 'text-align' },
-      overlayAnchorPos: [
-        { ...overlayAnchor, property: 'right' },
-        { ...overlayAnchorRTL, property: 'left' },
-      ],
       overlayGap: {
         property: () => DateFieldClass.cssVarList.overlayGap,
       },
-
       overlayBackgroundColor: {
         property: () => DateFieldClass.cssVarList.overlayBackgroundColor,
       },
@@ -667,7 +690,6 @@ export const DateFieldClass = compose(
       outlineWidth: { ...overlay },
       outlineColor: { ...overlay },
       outlineStyle: { ...overlay },
-      direction: { ...overlay },
     },
   }),
   draggableMixin,

package/src/components/descope-date-field/descope-calendar/CalendarClass.js

@@ -536,8 +536,8 @@ const {
   weekday: { selector: () => '.weekday' },
   navPrev: { selector: () => '.nav-prev' },
   navNext: { selector: () => '.nav-next' },
-  navPrevRTL: { selector: () => ':host(:dir(rtl)) .nav-prev' },
-  navNextRTL: { selector: () => ':host(:dir(rtl)) .nav-next' },
+  navPrevRTL: { selector: () => ':host([st-host-direction="rtl"]) .nav-prev' },
+  navNextRTL: { selector: () => ':host([st-host-direction="rtl"]) .nav-next' },
   yearInput: { selector: () => '.year-input' },
   monthInput: { selector: () => '.month-input' },
 };

package/src/theme/components/dateField.js

@@ -23,7 +23,6 @@ const dateField = {
   [vars.overlay.outlineWidth]: '0',
   [vars.overlay.outlineColor]: 'transparent',
   [vars.overlay.outlineStyle]: 'none',
-  [vars.overlay.direction]: refs.direction,
   [vars.overlay.padding]: '0',
 };
 

package/dist/umd/1224.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1224.js.LICENSE.txt */
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[1224],{61224:(t,e,n)=>{n.d(e,{D:()=>c});var o=n(99109),s=n(95229),i=n(52628);const c=t=>class extends((0,s.f)((0,i.L)(t))){get _activeKeys(){return[" "]}ready(){super.ready(),(0,o.NH)(this,"down",(t=>{this._shouldSetActive(t)&&this._setActive(!0)})),(0,o.NH)(this,"up",(()=>{this._setActive(!1)}))}disconnectedCallback(){super.disconnectedCallback(),this._setActive(!1)}_shouldSetActive(t){return!this.disabled}_onKeyDown(t){super._onKeyDown(t),this._shouldSetActive(t)&&this._activeKeys.includes(t.key)&&(this._setActive(!0),document.addEventListener("keyup",(t=>{this._activeKeys.includes(t.key)&&this._setActive(!1)}),{once:!0}))}_setActive(t){this.toggleAttribute("active",t)}}},99109:(t,e,n)=>{n.d(e,{NH:()=>M});var o=n(87913);const s=!1,i=t=>t,c="string"==typeof document.head.style.touchAction,u="__polymerGestures",r="__polymerGesturesHandled",a="__polymerGesturesTouchAction",h=["mousedown","mousemove","mouseup","click"],d=[0,1,4,2],f=function(){try{return 1===new MouseEvent("test",{buttons:1}).buttons}catch(t){return!1}}();function l(t){return h.indexOf(t)>-1}let m=!1;function p(t){if(!l(t)&&"touchend"!==t)return c&&m&&s?{passive:!0}:void 0}!function(){try{const t=Object.defineProperty({},"passive",{get(){m=!0}});window.addEventListener("test",null,t),window.removeEventListener("test",null,t)}catch(t){}}();const v=navigator.userAgent.match(/iP(?:[oa]d|hone)|Android/u),y={button:!0,command:!0,fieldset:!0,input:!0,keygen:!0,optgroup:!0,option:!0,select:!0,textarea:!0};function w(t){const e=t.type;if(!l(e))return!1;if("mousemove"===e){let e=void 0===t.buttons?1:t.buttons;return t instanceof window.MouseEvent&&!f&&(e=d[t.which]||0),Boolean(1&e)}return 0===(void 0===t.button?0:t.button)}const g={mouse:{target:null,mouseIgnoreJob:null},touch:{x:0,y:0,id:-1,scrollDecided:!1}};function b(t,e,n){t.movefn=e,t.upfn=n,document.addEventListener("mousemove",e),document.addEventListener("mouseup",n)}function _(t){document.removeEventListener("mousemove",t.movefn),document.removeEventListener("mouseup",t.upfn),t.movefn=null,t.upfn=null}const x=window.ShadyDOM&&window.ShadyDOM.noPatch?window.ShadyDOM.composedPath:t=>t.composedPath&&t.composedPath()||[],k={},E=[];function A(t){const e=x(t);return e.length>0?e[0]:t.target}function N(t){const e=t.type,n=t.currentTarget[u];if(!n)return;const o=n[e];if(!o)return;if(!t[r]&&(t[r]={},e.startsWith("touch"))){const n=t.changedTouches[0];if("touchstart"===e&&1===t.touches.length&&(g.touch.id=n.identifier),g.touch.id!==n.identifier)return;c||"touchstart"!==e&&"touchmove"!==e||function(t){const e=t.changedTouches[0],n=t.type;if("touchstart"===n)g.touch.x=e.clientX,g.touch.y=e.clientY,g.touch.scrollDecided=!1;else if("touchmove"===n){if(g.touch.scrollDecided)return;g.touch.scrollDecided=!0;const n=function(t){let e="auto";const n=x(t);for(let t,o=0;o<n.length;o++)if(t=n[o],t[a]){e=t[a];break}return e}(t);let o=!1;const s=Math.abs(g.touch.x-e.clientX),i=Math.abs(g.touch.y-e.clientY);t.cancelable&&("none"===n?o=!0:"pan-x"===n?o=i>s:"pan-y"===n&&(o=s>i)),o?t.preventDefault():T("track")}}(t)}const s=t[r];if(!s.skip){for(let e,n=0;n<E.length;n++)e=E[n],o[e.name]&&!s[e.name]&&e.flow&&e.flow.start.indexOf(t.type)>-1&&e.reset&&e.reset();for(let n,i=0;i<E.length;i++)n=E[i],o[n.name]&&!s[n.name]&&(s[n.name]=!0,n[e](t))}}function M(t,e,n){return!!k[e]&&(function(t,e,n){const s=k[e],i=s.deps,r=s.name;let h=t[u];h||(t[u]=h={});for(let e,n,o=0;o<i.length;o++)e=i[o],v&&l(e)&&"click"!==e||(n=h[e],n||(h[e]=n={_count:0}),0===n._count&&t.addEventListener(e,N,p(e)),n[r]=(n[r]||0)+1,n._count=(n._count||0)+1);t.addEventListener(e,n),s.touchAction&&function(t,e){c&&t instanceof HTMLElement&&o.YA.run((()=>{t.style.touchAction=e})),t[a]=e}(t,s.touchAction)}(t,e,n),!0)}function Y(t){E.push(t),t.emits.forEach((e=>{k[e]=t}))}function D(t,e,n){const o=new Event(e,{bubbles:!0,cancelable:!0,composed:!0});if(o.detail=n,i(t).dispatchEvent(o),o.defaultPrevented){const t=n.preventer||n.sourceEvent;t&&t.preventDefault&&t.preventDefault()}}function T(t){const e=function(t){for(let e,n=0;n<E.length;n++){e=E[n];for(let n,o=0;o<e.emits.length;o++)if(n=e.emits[o],n===t)return e}return null}(t);e.info&&(e.info.prevent=!0)}function X(t,e,n,o){e&&D(e,t,{x:n.clientX,y:n.clientY,sourceEvent:n,preventer:o,prevent:t=>T(t)})}function L(t,e,n){if(t.prevent)return!1;if(t.started)return!0;const o=Math.abs(t.x-e),s=Math.abs(t.y-n);return o>=5||s>=5}function P(t,e,n){if(!e)return;const o=t.moves[t.moves.length-2],s=t.moves[t.moves.length-1],i=s.x-t.x,c=s.y-t.y;let u,r=0;o&&(u=s.x-o.x,r=s.y-o.y),D(e,"track",{state:t.state,x:n.clientX,y:n.clientY,dx:i,dy:c,ddx:u,ddy:r,sourceEvent:n,hover:()=>function(t,e){let n=document.elementFromPoint(t,e),o=n;for(;o&&o.shadowRoot&&!window.ShadyDOM;){const s=o;if(o=o.shadowRoot.elementFromPoint(t,e),s===o)break;o&&(n=o)}return n}(n.clientX,n.clientY)})}function O(t,e,n){const o=Math.abs(e.clientX-t.x),s=Math.abs(e.clientY-t.y),i=A(n||e);!i||y[i.localName]&&i.hasAttribute("disabled")||(isNaN(o)||isNaN(s)||o<=25&&s<=25||function(t){if("click"===t.type){if(0===t.detail)return!0;const e=A(t);if(!e.nodeType||e.nodeType!==Node.ELEMENT_NODE)return!0;const n=e.getBoundingClientRect(),o=t.pageX,s=t.pageY;return!(o>=n.left&&o<=n.right&&s>=n.top&&s<=n.bottom)}return!1}(e))&&(t.prevent||D(i,"tap",{x:e.clientX,y:e.clientY,sourceEvent:e,preventer:n}))}Y({name:"downup",deps:["mousedown","touchstart","touchend"],flow:{start:["mousedown","touchstart"],end:["mouseup","touchend"]},emits:["down","up"],info:{movefn:null,upfn:null},reset(){_(this.info)},mousedown(t){if(!w(t))return;const e=A(t),n=this;b(this.info,(t=>{w(t)||(X("up",e,t),_(n.info))}),(t=>{w(t)&&X("up",e,t),_(n.info)})),X("down",e,t)},touchstart(t){X("down",A(t),t.changedTouches[0],t)},touchend(t){X("up",A(t),t.changedTouches[0],t)}}),Y({name:"track",touchAction:"none",deps:["mousedown","touchstart","touchmove","touchend"],flow:{start:["mousedown","touchstart"],end:["mouseup","touchend"]},emits:["track"],info:{x:0,y:0,state:"start",started:!1,moves:[],addMove(t){this.moves.length>2&&this.moves.shift(),this.moves.push(t)},movefn:null,upfn:null,prevent:!1},reset(){this.info.state="start",this.info.started=!1,this.info.moves=[],this.info.x=0,this.info.y=0,this.info.prevent=!1,_(this.info)},mousedown(t){if(!w(t))return;const e=A(t),n=this,o=t=>{const o=t.clientX,s=t.clientY;L(n.info,o,s)&&(n.info.state=n.info.started?"mouseup"===t.type?"end":"track":"start","start"===n.info.state&&T("tap"),n.info.addMove({x:o,y:s}),w(t)||(n.info.state="end",_(n.info)),e&&P(n.info,e,t),n.info.started=!0)};b(this.info,o,(t=>{n.info.started&&o(t),_(n.info)})),this.info.x=t.clientX,this.info.y=t.clientY},touchstart(t){const e=t.changedTouches[0];this.info.x=e.clientX,this.info.y=e.clientY},touchmove(t){const e=A(t),n=t.changedTouches[0],o=n.clientX,s=n.clientY;L(this.info,o,s)&&("start"===this.info.state&&T("tap"),this.info.addMove({x:o,y:s}),P(this.info,e,n),this.info.state="track",this.info.started=!0)},touchend(t){const e=A(t),n=t.changedTouches[0];this.info.started&&(this.info.state="end",this.info.addMove({x:n.clientX,y:n.clientY}),P(this.info,e,n))}}),Y({name:"tap",deps:["mousedown","click","touchstart","touchend"],flow:{start:["mousedown","touchstart"],end:["click","touchend"]},emits:["tap"],info:{x:NaN,y:NaN,prevent:!1},reset(){this.info.x=NaN,this.info.y=NaN,this.info.prevent=!1},mousedown(t){w(t)&&(this.info.x=t.clientX,this.info.y=t.clientY)},click(t){w(t)&&O(this.info,t)},touchstart(t){const e=t.changedTouches[0];this.info.x=e.clientX,this.info.y=e.clientY},touchend(t){O(this.info,t.changedTouches[0],t)}})}}]);