@descope/web-components-ui 1.0.333 → 1.0.335

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 n=r(2061),o=r(54567),i=r(54201),a=r(94978);const l=(0,o.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,n.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 n=t.customValueTransformFn(r)||"";n!==this.value&&e.set.call(this,n)}}})}#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}}#n(){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.#n(),this.renderItems(),(0,o.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,o.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"]||""}}))((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:()=>n.H}),r(47583);var n=r(84049);customElements.define(n.f,n.H)},41377:(e,t,r)=>{r.d(t,{Z:()=>d,f:()=>a});var n=r(73878),o=r(54567),i=r(16418);const a=(0,o.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,n.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" external-input="true"></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 n=r(41377);customElements.define(n.f,n.Z)},69423:(e,t,r)=>{r.r(t),r.d(t,{PhoneFieldInputBoxClass:()=>x}),r(83067),r(21294),r(19357);var n=r(41377),o=r(54567),i=r(2061),a=r(94978),l=r(56417),s=r(87262),p=r(54201);const d=l.z.cssVarList,u=(0,o.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<${n.f}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${n.f}>\n      `,this.baseElement.appendChild(e.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(n.f),(0,o.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:()=>o});var n=r(87262);const o=e=>n.Z.find((t=>t.code===e))?.dialCode}}]);
+"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"]||""}}))((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}}]);

package/package.json

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

package/src/components/descope-email-field/EmailFieldClass.js

@@ -7,18 +7,13 @@ import {
 } from '../../mixins';
 import textFieldMappings from '../descope-text-field/textFieldMappings';
 import { compose } from '../../helpers';
-import { getComponentName, syncAttrs } from '../../helpers/componentHelpers';
+import { getComponentName } from '../../helpers/componentHelpers';
 import {
   inputFloatingLabelStyle,
   resetInputLabelPosition,
   resetInputOverrides,
   useHostExternalPadding,
 } from '../../helpers/themeHelpers/resetHelpers';
-import {
-  applyExternalInputStyles,
-  createExternalInputEle,
-  createExternalInputSlot,
-} from '../../helpers/externalInputs';
 
 export const componentName = getComponentName('email-field');
 
@@ -29,103 +24,12 @@ const customMixin = (superclass) =>
 
       this.baseElement.setAttribute('pattern', '^[\\w\\.\\%\\+\\-]+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$');
 
-      if (!this.isNoExternalInput) {
-        this.externalInput = this.handleExternalInput();
-
-        this.addEventListener('focus', () => {
-          this.externalInput.focus();
-        });
-      } else {
-        this.setAttribute('autocomplete', this.getAutocompleteType());
-      }
-    }
-
-    get isNoExternalInput() {
-      return this.getAttribute('no-external-input') === 'true';
-    }
-
-    forwardInputValue(source, target) {
-      // set internal sync events
-      const valueDescriptor = Object.getOwnPropertyDescriptor(
-        this.inputElement.constructor.prototype,
-        'value'
-      );
-
-      Object.defineProperty(source, 'value', {
-        ...valueDescriptor,
-
-        set(v) {
-          valueDescriptor.set.call(this, v);
-          // eslint-disable-next-line no-param-reassign
-          target.value = v;
-        },
-        configurable: true,
-      });
-    }
-
-    handleExternalInput() {
-      // set safety attribute `external-input`
-      this.setAttribute('external-input', 'true');
-
-      // use original input element as reference
-      const origInput = this.baseElement.querySelector('input');
-
-      // to avoid focus loop between external-input and origInput
-      // we set origInput's tabindex to -1
-      // otherwise, shift-tab will never leave the component focus
-      origInput.setAttribute('tabindex', '-1');
-
-      // create external slot
-      const externalInputSlot = createExternalInputSlot('external-input', 'suffix');
-      // append external slot to base element
-      this.baseElement.appendChild(externalInputSlot);
-
-      const externalInput = createExternalInputEle(
-        'external-input',
-        'text',
-        this.getAutocompleteType()
-      );
-
-      // apply original input's styles to external input
-      setTimeout(() => {
-        applyExternalInputStyles(origInput, externalInput, this.getAttribute('label-type'));
-      });
-
-      // set external input events
-      this.handleExternalInputEvents(externalInput);
-
-      // 1Password catches the internal input, so we forward the value to the external input
-      this.forwardInputValue(origInput, externalInput);
-
-      syncAttrs(origInput, externalInput, {
-        includeAttrs: ['disabled', 'readonly', 'pattern'],
-      });
-
-      // append external input to component's DOM
-      this.appendChild(externalInput);
-
-      return externalInput;
+      this.setAttribute('autocomplete', this.getAutocompleteType());
     }
 
     getAutocompleteType() {
       return this.getAttribute('autocomplete') || 'username';
     }
-
-    handleExternalInputEvents(externalInput) {
-      // sync value of insible input back to original input
-      externalInput.addEventListener('input', (e) => {
-        this.value = e.target.value;
-      });
-
-      // sync `focused` attribute on host when focusing on external input
-      externalInput.addEventListener('focus', () => {
-        this.setAttribute('focused', 'true');
-      });
-
-      externalInput.addEventListener('blur', () => {
-        this.removeAttribute('focused');
-      });
-    }
   };
 
 export const EmailFieldClass = compose(
@@ -133,7 +37,7 @@ export const EmailFieldClass = compose(
     mappings: textFieldMappings,
   }),
   draggableMixin,
-  proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
+  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   customMixin
 )(
@@ -161,10 +65,6 @@ export const EmailFieldClass = compose(
         opacity: 0;
       }
 
-      vaadin-email-field:not([no-external-input="true"]) > input:not(:placeholder-shown) {
-        opacity: 0;
-      }
-
       :host ::slotted(*) {
         -webkit-mask-image: none;
       }

package/src/components/descope-grid/GridClass.js

@@ -220,6 +220,7 @@ export const GridClass = compose(
         { ...rowSeparator, property: 'border-top-color' },
       ],
       resizeHandleColor: { ...resizeHandle, property: 'background-color' },
+      hostDirection: { ...host, property: 'direction', fallback: 'ltr' },
     },
   }),
   draggableMixin,

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

@@ -26,20 +26,10 @@ const customMixin = (superclass) =>
       </${descopeInternalComponentName}>
 			`;
 
-      this.setAttribute('external-input', 'true');
-
       this.baseElement.appendChild(template.content.cloneNode(true));
 
       this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
 
-      // get descope input components
-      this.passwordInput = this.inputElement.querySelector('[data-id="password"]');
-      this.confirmInput = this.inputElement.querySelector('[data-id="confirm"]');
-
-      // create slots for external password input
-      this.createExternalInput(this.passwordInput, 'external-password-input');
-      this.createExternalInput(this.confirmInput, 'external-confirm-input');
-
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
           'password-label',
@@ -63,20 +53,6 @@ const customMixin = (superclass) =>
         ],
       });
     }
-
-    createExternalInput(node, slotName) {
-      const externalInput = node.querySelector('input');
-      const slotEle = document.createElement('slot');
-      const targetSlot = externalInput.getAttribute('slot');
-      slotEle.setAttribute('name', slotName);
-      slotEle.setAttribute('slot', targetSlot);
-      node.appendChild(slotEle);
-
-      // move external input
-      externalInput.setAttribute('slot', slotName);
-      externalInput.setAttribute('data-hidden-input', 'true');
-      this.appendChild(externalInput);
-    }
   };
 
 const {

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

@@ -6,7 +6,7 @@ import {
   componentNameValidationMixin,
 } from '../../mixins';
 import { compose } from '../../helpers';
-import { getComponentName, syncAttrs } from '../../helpers/componentHelpers';
+import { getComponentName } from '../../helpers/componentHelpers';
 import passwordDraggableMixin from './passwordDraggableMixin';
 import {
   resetInputLabelPosition,
@@ -14,116 +14,11 @@ import {
   useHostExternalPadding,
   inputFloatingLabelStyle,
 } from '../../helpers/themeHelpers/resetHelpers';
-import {
-  applyExternalInputStyles,
-  createExternalInputEle,
-  createExternalInputSlot,
-} from '../../helpers/externalInputs';
 
 export const componentName = getComponentName('password');
 
 const customMixin = (superclass) =>
   class PasswordFieldMixinClass extends superclass {
-    init() {
-      super.init?.();
-
-      // reset vaadin's checkValidity
-      this.baseElement.checkValidity = () => {};
-      // set safety attribute `external-input`
-      this.setAttribute('external-input', 'true');
-
-      // use original input element as reference
-      const origInput = this.baseElement.querySelector('input');
-
-      // to avoid focus loop between external-input and origInput
-      // we set origInput's tabindex to -1
-      // otherwise, shift-tab will never leave the component focus
-      origInput.setAttribute('tabindex', '-1');
-
-      // create external slot
-      const externalInputSlot = createExternalInputSlot('external-input', 'suffix');
-      // append external slot to base element
-      this.baseElement.appendChild(externalInputSlot);
-
-      // create external input
-      const externalInput = createExternalInputEle(
-        'external-input',
-        'password',
-        this.getAutocompleteType()
-      );
-
-      this.handlePasswordVisibility(externalInput);
-
-      // apply original input's styles to external input
-      setTimeout(() => {
-        applyExternalInputStyles(origInput, externalInput, this.getAttribute('label-type'));
-      });
-
-      // set external input events
-      this.handleExternalInputEvents(externalInput);
-
-      // sync input stateful attributes: `type` (for visibility state change) and `readonly`
-      syncAttrs(origInput, externalInput, { includeAttrs: ['type', 'readonly'] });
-      syncAttrs(this, externalInput, { includeAttrs: ['focused'] });
-
-      origInput.addEventListener('focus', (e) => {
-        e.preventDefault();
-        if (e.isTrusted) {
-          externalInput.focus();
-        }
-      });
-
-      externalInput.addEventListener('input', (e) => {
-        if (!e.target.value) {
-          this.removeAttribute('has-value');
-        } else {
-          this.setAttribute('has-value', 'true');
-        }
-      });
-
-      // append external input to component's DOM
-      this.appendChild(externalInput);
-    }
-
-    // override vaadin's password visibility toggle.
-    // we need this override in order to to resolve the external input `focus` race condition,
-    // which is caused due to the focus sync between the two inputs.
-    handlePasswordVisibility(externalInput) {
-      // disable vaadin's `__boundRevealButtonMouseDown` mouse-down event lisetener
-      const origBoundRevealButtonMouseDown = this.baseElement.__boundRevealButtonMouseDown;
-      this.baseElement
-        .querySelector('vaadin-password-field-button')
-        .removeEventListener('mousedown', origBoundRevealButtonMouseDown);
-
-      // disable vaadin's `_passwordVisibleChanged` observer
-      this.baseElement._passwordVisibleChanged = () => {};
-
-      // override vaadin's `_togglePasswordVisibility`
-      this.baseElement._togglePasswordVisibility = () => {
-        const currVisibility = externalInput.getAttribute('type');
-        if (currVisibility === 'password') {
-          this.showPasswordVisibility(externalInput);
-        } else {
-          this.hidePasswordVisibility(externalInput);
-        }
-      };
-
-      // on component blur, if password is revealed - hide it
-      // this behaves differently from vaadin's focus handling, and checks if the blur takes the component out of focus
-      // (which menas the click was made outside the component) or if the blur was called due to clicking the Reveal Button
-      // and then focusing in the input again
-      this.addEventListener('blur', () => {
-        setTimeout(() => {
-          const isHiddenAndFocused =
-            externalInput.getAttribute('type') !== 'password' &&
-            externalInput.getAttribute('focused') !== 'true';
-          if (isHiddenAndFocused) {
-            this.hidePasswordVisibility(externalInput);
-          }
-        });
-      });
-    }
-
     hidePasswordVisibility(input) {
       // handle input element's type
       input.setAttribute('type', 'password');
@@ -141,22 +36,6 @@ const customMixin = (superclass) =>
     getAutocompleteType() {
       return this.getAttribute('autocomplete') || 'current-password';
     }
-
-    handleExternalInputEvents(inputEle) {
-      // sync value of insible input back to original input
-      inputEle.addEventListener('input', (e) => {
-        this.value = e.target.value;
-      });
-
-      // sync `focused` attribute on host when focusing on external input
-      inputEle.addEventListener('focus', () => {
-        this.setAttribute('focused', 'true');
-      });
-
-      inputEle.addEventListener('blur', () => {
-        this.removeAttribute('focused');
-      });
-    }
   };
 
 const {
@@ -315,10 +194,6 @@ export const PasswordClass = compose(
       ::part(reveal-button) {
         align-self: center;
       }
-
-      vaadin-password-field > input:not(:placeholder-shown) {
-        opacity: 0;
-      }
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName,

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

@@ -51,31 +51,6 @@ const customMixin = (superclass) =>
         }
       }
     }
-
-    // webauthn is not working when the native input element is nested inside multiple shadow roots
-    // so we need to be able move the input outside the shadow root for some cases
-    get isExternalInput() {
-      return this.getAttribute('external-input') === 'true';
-    }
-
-    constructor() {
-      super();
-
-      if (this.isExternalInput) {
-        const origInput = this.baseElement.querySelector('input');
-        this.inputSlot = document.createElement('slot');
-
-        this.focus = () => {
-          origInput.focus();
-        };
-
-        this.inputSlot.setAttribute('name', 'input');
-        this.inputSlot.setAttribute('slot', 'input');
-        this.baseElement.appendChild(this.inputSlot);
-
-        this.appendChild(origInput);
-      }
-    }
   };
 
 export const TextFieldClass = compose(
@@ -83,7 +58,7 @@ export const TextFieldClass = compose(
     mappings: textFieldMappings,
   }),
   draggableMixin,
-  proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
+  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   customMixin
 )(

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

@@ -9,10 +9,6 @@ const {
   errorMessage,
   disabledPlaceholder,
   inputDisabled,
-  externalInput,
-  externalInputDisabled,
-  externalPlaceholder,
-  externalDisabledPlaceholder,
 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
@@ -27,10 +23,6 @@ const {
   inputDisabled: { selector: 'input:disabled' },
   helperText: { selector: '::part(helper-text)' },
   errorMessage: { selector: '::part(error-message)' },
-  externalInput: { selector: () => '::slotted(input)' },
-  externalInputDisabled: { selector: () => '::slotted(input:disabled)' },
-  externalPlaceholder: { selector: () => '::slotted(input:placeholder-shown)' },
-  externalDisabledPlaceholder: { selector: () => '::slotted(input:disabled::placeholder)' },
 };
 
 export default {
@@ -60,12 +52,8 @@ export default {
   inputValueTextColor: [
     { ...inputField, property: 'color' },
     { ...inputDisabled, property: '-webkit-text-fill-color' },
-    { ...externalInputDisabled, property: '-webkit-text-fill-color' },
-  ],
-  inputCaretTextColor: [
-    { ...input, property: 'color' },
-    { ...externalInput, property: 'color' },
   ],
+  inputCaretTextColor: [{ ...input, property: 'color' }],
 
   labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
 
@@ -78,8 +66,6 @@ export default {
   inputHorizontalPadding: [
     { ...input, property: 'padding-left' },
     { ...input, property: 'padding-right' },
-    { ...externalInput, property: 'padding-left' },
-    { ...externalInput, property: 'padding-right' },
   ],
 
   inputOutlineColor: { ...inputField, property: 'outline-color' },
@@ -87,17 +73,12 @@ export default {
   inputOutlineWidth: { ...inputField, property: 'outline-width' },
   inputOutlineOffset: { ...inputField, property: 'outline-offset' },
 
-  inputTextAlign: [
-    { ...input, property: 'text-align' },
-    { ...externalInput, property: 'text-align' },
-  ],
+  inputTextAlign: [{ ...input, property: 'text-align' }],
 
   inputPlaceholderColor: [
     { selector: () => ':host input:placeholder-shown', property: 'color' },
     { ...placeholder, property: 'color' },
-    { ...externalPlaceholder, property: 'color' },
     { ...disabledPlaceholder, property: '-webkit-text-fill-color' },
-    { ...externalDisabledPlaceholder, property: '-webkit-text-fill-color' },
   ],
 
   labelPosition: { ...label, property: 'position' },
@@ -109,20 +90,8 @@ export default {
   inputTransformY: { ...label, property: 'transform' },
   inputTransition: { ...label, property: 'transition' },
   marginInlineStart: { ...label, property: 'margin-inline-start' },
-  placeholderOpacity: [
-    { selector: '> input:placeholder-shown', property: 'opacity' },
-    { ...externalPlaceholder, property: 'opacity' },
-  ],
-  inputVerticalAlignment: [
-    { ...inputField, property: 'align-items' },
-    { ...externalInput, property: 'align-items' },
-  ],
-  valueInputHeight: [
-    { ...input, property: 'height' },
-    { ...externalInput, property: 'height' },
-  ],
-  valueInputMarginBottom: [
-    { ...input, property: 'margin-bottom' },
-    { ...externalInput, property: 'margin-bottom' },
-  ],
+  placeholderOpacity: [{ selector: '> input:placeholder-shown', property: 'opacity' }],
+  inputVerticalAlignment: [{ ...inputField, property: 'align-items' }],
+  valueInputHeight: [{ ...input, property: 'height' }],
+  valueInputMarginBottom: [{ ...input, property: 'margin-bottom' }],
 };

package/src/components/phone-fields/descope-phone-field/PhoneFieldClass.js

@@ -68,7 +68,6 @@ const {
   inputField,
   countryCodeInput,
   phoneInput,
-  phoneExternalInput,
   separator,
   errorMessage,
   helperText,
@@ -78,7 +77,6 @@ const {
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
   inputField: { selector: '::part(input-field)' },
   phoneInput: { selector: () => 'descope-text-field' },
-  phoneExternalInput: { selector: () => '::slotted(input)' },
   countryCodeInput: { selector: () => 'descope-combo-box' },
   separator: { selector: 'descope-phone-field-internal .separator' },
   helperText: { selector: '::part(helper-text)' },
@@ -168,17 +166,10 @@ export const PhoneFieldClass = compose(
       inputOutlineWidth: { ...inputField, property: 'outline-width' },
       inputOutlineOffset: { ...inputField, property: 'outline-offset' },
 
-      valueInputHeight: [
-        { ...phoneExternalInput, property: textVars.valueInputHeight },
-        { ...countryCodeInput, property: comboVars.valueInputHeight },
-      ],
-      valueInputMarginBottom: [
-        { ...phoneInput, property: textVars.valueInputMarginBottom },
-        { ...phoneExternalInput, property: 'margin-bottom' },
-      ],
+      valueInputHeight: [{ ...countryCodeInput, property: comboVars.valueInputHeight }],
+      valueInputMarginBottom: [{ ...phoneInput, property: textVars.valueInputMarginBottom }],
       marginInlineStart: [
         { ...phoneInput, property: textVars.marginInlineStart },
-        { ...phoneExternalInput, property: 'margin-inline-start' },
         { ...countryCodeInput, property: comboVars.marginInlineStart },
       ],
     },

package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js

@@ -1,5 +1,5 @@
 import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';
-import { forwardAttrs, getComponentName, syncAttrs } from '../../../../helpers/componentHelpers';
+import { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';
 import CountryCodes from '../../CountryCodes';
 import { comboBoxItem } from '../helpers';
 
@@ -36,7 +36,7 @@ class PhoneFieldInternal extends BaseInputClass {
       ${CountryCodes.map((item) => comboBoxItem(item)).join('')}
       </descope-combo-box>
       <div class="separator"></div>
-      <descope-text-field type="tel" external-input="true"></descope-text-field>
+      <descope-text-field type="tel"></descope-text-field>
     </div>
     `;
 
@@ -47,9 +47,6 @@ class PhoneFieldInternal extends BaseInputClass {
     forwardAttrs(this, this.countryCodeInput, { includeAttrs: ['label-type'] });
     forwardAttrs(this, this.phoneNumberInput, { includeAttrs: ['label-type'] });
 
-    const externalInput = this.phoneNumberInput.querySelector('input');
-    syncAttrs(this.phoneNumberInput, externalInput, { includeAttrs: ['focused'] });
-
     // override combo box setter to display dialCode value in input
     this.countryCodeInput.customValueTransformFn = (val) => {
       const [, dialCode] = val?.split?.(' ') || [];

package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js

@@ -31,7 +31,7 @@ class PhoneFieldInternal extends BaseInputClass {
 
     this.innerHTML = `
       <div>
-        <descope-text-field tabindex="1" external-input="true"></descope-text-field>
+        <descope-text-field tabindex="1"></descope-text-field>
       </div>
       `;