@descope/web-components-ui 1.0.334 → 1.0.336

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:()=>s});var i=n(73878),a=n(54567),r=n(16418);const s=(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:s,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" external-input="true"></descope-text-field>\n      </div>\n      ',this.phoneNumberInput=this.querySelector("descope-text-field")}get defaultCountryCode(){return(0,r.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(74241),a=n(52807),r=n(12521),s=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,r.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([[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(74241),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`
       <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 s.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.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)}}]);

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.334",
+  "version": "1.0.336",
   "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-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

@@ -17,7 +17,7 @@ import {
 
 export const componentName = getComponentName('text-field');
 
-const observedAttrs = ['type', 'label-type'];
+const observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];
 
 const customMixin = (superclass) =>
   class TextFieldClass extends superclass {
@@ -25,6 +25,47 @@ const customMixin = (superclass) =>
       return observedAttrs.concat(superclass.observedAttributes || []);
     }
 
+    icon;
+
+    init() {
+      super.init?.();
+    }
+
+    renderCopyToClipboard(shouldRender) {
+      if (!shouldRender) {
+        this.icon?.remove();
+        return;
+      }
+
+      const iconInitConfig = {
+        icon: 'vaadin:copy-o',
+        title: 'Copy',
+        style: 'cursor: pointer',
+      };
+
+      const iconCopiedConfig = {
+        icon: 'vaadin:check-circle-o',
+        title: 'Copied',
+        style: 'cursor: initial',
+      };
+
+      this.icon = Object.assign(document.createElement('vaadin-icon'), {
+        slot: 'suffix',
+        ...iconInitConfig,
+      });
+
+      this.baseElement.appendChild(this.icon);
+      this.icon.addEventListener('click', () => {
+        navigator.clipboard.writeText(this.value);
+        Object.assign(this.icon, iconCopiedConfig);
+
+        // we want the icon to go back to the initial state after 5 seconds
+        setTimeout(() => {
+          Object.assign(this.icon, iconInitConfig);
+        }, 5000);
+      });
+    }
+
     onLabelClick() {
       this.focus();
     }
@@ -48,34 +89,11 @@ const customMixin = (superclass) =>
           } else {
             this.removeEventListener('click', this.onLabelClick);
           }
+        } else if (attrName === 'copy-to-clipboard') {
+          this.renderCopyToClipboard(newVal === 'true');
         }
       }
     }
-
-    // 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 +101,7 @@ export const TextFieldClass = compose(
     mappings: textFieldMappings,
   }),
   draggableMixin,
-  proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
+  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   customMixin
 )(
@@ -105,14 +123,18 @@ export const TextFieldClass = compose(
 
       vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
         opacity: 0;
-      }        
+      }
       vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
         opacity: 0;
-      }        
+      }
       ${resetInputLabelPosition('vaadin-text-field')}
 			${useHostExternalPadding(TextFieldClass.cssVarList)}
 			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
       ${inputFloatingLabelStyle()}
+
+      vaadin-text-field vaadin-icon {
+        align-self: center;
+      }
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName,

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

@@ -1,4 +1,6 @@
 import '@vaadin/text-field';
+import '@vaadin/icon';
+
 import { componentName, TextFieldClass } from './TextFieldClass';
 
 customElements.define(componentName, TextFieldClass);