@descope/web-components-ui 1.0.333 → 1.0.335

Sign up to get free protection for your applications and to get access to all the features.
Files changed (43) hide show
  1. package/dist/cjs/index.cjs.js +86 -509
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +88 -514
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/4392.js +1 -1
  6. package/dist/umd/4978.js +1 -1
  7. package/dist/umd/DescopeDev.js +1 -1
  8. package/dist/umd/descope-email-field-index-js.js +4 -4
  9. package/dist/umd/descope-grid-index-js.js +1 -1
  10. package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
  11. package/dist/umd/descope-new-password-index-js.js +1 -1
  12. package/dist/umd/descope-number-field-index-js.js +1 -1
  13. package/dist/umd/descope-passcode-index-js.js +1 -1
  14. package/dist/umd/descope-password-index-js.js +1 -1
  15. package/dist/umd/descope-radio-group-index-js.js +1 -1
  16. package/dist/umd/descope-text-field-index-js.js +2 -2
  17. package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +1 -1
  18. package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js +1 -1
  19. package/dist/umd/phone-fields-descope-phone-field-index-js.js +1 -1
  20. package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js +2 -2
  21. package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -1
  22. package/package.json +1 -1
  23. package/src/components/descope-email-field/EmailFieldClass.js +3 -103
  24. package/src/components/descope-grid/GridClass.js +1 -0
  25. package/src/components/descope-new-password/NewPasswordClass.js +0 -24
  26. package/src/components/descope-password/PasswordClass.js +1 -126
  27. package/src/components/descope-text-field/TextFieldClass.js +1 -26
  28. package/src/components/descope-text-field/textFieldMappings.js +6 -37
  29. package/src/components/phone-fields/descope-phone-field/PhoneFieldClass.js +2 -11
  30. package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +2 -5
  31. package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js +1 -1
  32. package/src/mixins/proxyInputMixin.js +2 -5
  33. package/src/theme/components/comboBox.js +10 -15
  34. package/src/theme/components/emailField.js +10 -15
  35. package/src/theme/components/grid.js +1 -0
  36. package/src/theme/components/multiSelectComboBox.js +9 -10
  37. package/src/theme/components/newPassword.js +1 -6
  38. package/src/theme/components/numberField.js +10 -15
  39. package/src/theme/components/password.js +9 -14
  40. package/src/theme/components/phoneField.js +3 -8
  41. package/src/theme/components/phoneInputBoxField.js +9 -14
  42. package/src/theme/components/textField.js +10 -15
  43. package/src/helpers/externalInputs.js +0 -76
@@ -1 +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}}]);
1
+ "use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[5119],{84049:(e,t,r)=>{r.d(t,{H:()=>f,f:()=>l});var o=r(2061),n=r(54567),i=r(54201),a=r(94978);const l=(0,n.iY)("combo-box"),{host:s,inputField:p,inputElement:d,placeholder:u,toggle:c,clearButton:h,label:b,requiredIndicator:m,helperText:y,errorMessage:g}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"input"},placeholder:{selector:"> input:placeholder-shown"},toggle:{selector:"::part(toggle-button)"},clearButton:{selector:"::part(clear-button)"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},f=(0,o.qC)((0,a.yk)({mappings:{hostWidth:{...s,property:"width"},hostDirection:{...s,property:"direction"},fontSize:[{},s],fontFamily:[b,u,p,y,g],labelFontSize:{...b,property:"font-size"},labelFontWeight:{...b,property:"font-weight"},labelTextColor:[{...b,property:"color"},{...m,property:"color"}],errorMessageTextColor:{...g,property:"color"},inputHeight:{...p,property:"height"},inputBackgroundColor:{...p,property:"background-color"},inputBorderColor:{...p,property:"border-color"},inputBorderWidth:{...p,property:"border-width"},inputBorderStyle:{...p,property:"border-style"},inputBorderRadius:{...p,property:"border-radius"},labelRequiredIndicator:{...m,property:"content"},inputValueTextColor:{...p,property:"color"},inputPlaceholderTextColor:{...u,property:"color"},inputDropdownButtonCursor:[{...c,property:"cursor"},{...h,property:"cursor"}],inputDropdownButtonColor:[{...c,property:"color"},{...h,property:"color"}],inputDropdownButtonSize:[{...c,property:"font-size"},{...h,property:"font-size"}],inputDropdownButtonOffset:[{...c,property:"margin-right"},{...c,property:"margin-left"}],inputOutlineColor:{...p,property:"outline-color"},inputOutlineWidth:{...p,property:"outline-width"},inputOutlineStyle:{...p,property:"outline-style"},inputOutlineOffset:{...p,property:"outline-offset"},inputHorizontalPadding:[{...d,property:"padding-left"},{...d,property:"padding-right"}],labelPosition:{...b,property:"position"},labelTopPosition:{...b,property:"top"},labelHorizontalPosition:[{...b,property:"left"},{...b,property:"right"}],inputTransformY:{...b,property:"transform"},inputTransition:{...b,property:"transition"},marginInlineStart:{...b,property:"margin-inline-start"},placeholderOpacity:{...u,property:"opacity"},inputVerticalAlignment:{...p,property:"align-items"},valueInputHeight:{...d,property:"height"},valueInputMarginBottom:{...d,property:"margin-bottom"},overlayBackground:{property:()=>f.cssVarList.overlay.backgroundColor},overlayTextColor:{property:()=>f.cssVarList.overlay.textColor},overlayBorder:{property:()=>f.cssVarList.overlay.border},overlayFontSize:{property:()=>f.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>f.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>f.cssVarList.overlay.cursor},overlayItemBoxShadow:{property:()=>f.cssVarList.overlay.itemBoxShadow},overlayItemPaddingInlineStart:{property:()=>f.cssVarList.overlay.itemPaddingInlineStart},overlayItemPaddingInlineEnd:{property:()=>f.cssVarList.overlay.itemPaddingInlineEnd}}}),a.e4,(0,a.Iw)({name:"overlay",selector:"",mappings:{backgroundColor:{selector:"vaadin-combo-box-scroller"},minHeight:{selector:"vaadin-combo-box-overlay"},margin:{selector:"vaadin-combo-box-overlay"},cursor:{selector:"vaadin-combo-box-item"},fontFamily:{selector:"vaadin-combo-box-item"},textColor:{selector:"vaadin-combo-box-item",property:"color"},fontSize:{selector:"vaadin-combo-box-item"},itemBoxShadow:{selector:"vaadin-combo-box-item",property:"box-shadow"},itemPaddingInlineStart:{selector:"vaadin-combo-box-item",property:"padding-inline-start"},itemPaddingInlineEnd:{selector:"vaadin-combo-box-item",property:"padding-inline-end"}},forward:{include:!1,attributes:["size"]}}),(0,a.dj)({proxyProps:["selectionStart"],inputEvent:"selected-item-changed"}),a.Ae,(e=>class extends e{static get observedAttributes(){return["label-type"]}#e=({displayName:e,value:t,label:r})=>`<span data-name="${r}" data-id="${t}">${e||r}</span>`;#t;get defaultValue(){return this.getAttribute("default-value")}get renderItem(){return this.#e}set renderItem(e){this.#e=e,this.renderItems()}get data(){if(this.#t)return this.#t;const e=this.getAttribute("data");if(e)try{const t=JSON.parse(e);if(this.isValidDataType(t))return t}catch(e){console.error('could not parse data string from attribute "data" -',e.message)}return[]}set data(e){this.isValidDataType(e)&&(this.#t=e,this.renderItems())}isValidDataType(e){const t=Array.isArray(e);return t||console.error("data must be an array, received:",e),t}getItemsTemplate(){return this.data?.reduce?.(((e,t)=>e+(this.renderItem?.(t||{})||"")),"")}renderItems(){const e=this.getItemsTemplate();e&&(this.innerHTML=e)}handleSelectedItem(){const e=this.baseElement.selectedItem?.["data-id"];this.baseElement.selectedItem=void 0,e&&(this.value=e),this.value||this.setDefaultValue()}customValueTransformFn(e){return e}setComboBoxDescriptor(){const e=Object.getOwnPropertyDescriptor(this.inputElement.constructor.prototype,"value"),t=this;Object.defineProperties(this.inputElement,{value:{...e,set(r){if(!t.baseElement.items?.length)return;const o=t.customValueTransformFn(r)||"";o!==this.value&&e.set.call(this,o)}}})}#r(){const e=this.shadowRoot.querySelector(this.baseSelector),t=Array.from(this.children);t.length&&(t.forEach((e=>{Object.defineProperty(e,"data-name",{value:e.getAttribute("data-name"),configurable:!0,writable:!0}),Object.defineProperty(e,"data-id",{value:e.getAttribute("data-id"),configurable:!0,writable:!0})})),e.items=t,setTimeout((()=>{this.handleSelectedItem()}),0)),e.renderer=(e,t,r)=>{e.innerHTML=r.item.outerHTML}}#o(){const e=this.baseElement.shadowRoot.querySelector("vaadin-combo-box-overlay");e._attachOverlay=()=>{e.bringToFront()},e._detachOverlay=()=>{},e._enterModalState=()=>{}}init(){super.init?.(),this.getValidity=function(){return!this.value&&this.isRequired?{valueMissing:!0}:{}},this.setComboBoxDescriptor(),this.#o(),this.renderItems(),(0,n.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,n.P$)(this,this.#r.bind(this)),this.setDefaultValue(),this.baseElement.addEventListener("selected-item-changed",(()=>{this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}))}onLabelClick(){this.isReadOnly||this.isDisabled||(this.focus(),this.setAttribute("opened","true"))}attributeChangedCallback(e,t,r){super.attributeChangedCallback?.(e,t,r),t!==r&&"label-type"===e&&("floating"===r?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick))}setDefaultValue(){this.value=this.defaultValue}set value(e){if(e){const t=this.baseElement.items?.find((t=>t["data-id"]===e));t&&(this.baseElement.selectedItem=t)}else this.baseElement.selectedItem=void 0}get value(){return this.baseElement.selectedItem?.["data-id"]||""}}))((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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@descope/web-components-ui",
3
- "version": "1.0.333",
3
+ "version": "1.0.335",
4
4
  "description": "",
5
5
  "main": "dist/cjs/index.cjs.js",
6
6
  "module": "dist/index.esm.js",
@@ -7,18 +7,13 @@ import {
7
7
  } from '../../mixins';
8
8
  import textFieldMappings from '../descope-text-field/textFieldMappings';
9
9
  import { compose } from '../../helpers';
10
- import { getComponentName, syncAttrs } from '../../helpers/componentHelpers';
10
+ import { getComponentName } from '../../helpers/componentHelpers';
11
11
  import {
12
12
  inputFloatingLabelStyle,
13
13
  resetInputLabelPosition,
14
14
  resetInputOverrides,
15
15
  useHostExternalPadding,
16
16
  } from '../../helpers/themeHelpers/resetHelpers';
17
- import {
18
- applyExternalInputStyles,
19
- createExternalInputEle,
20
- createExternalInputSlot,
21
- } from '../../helpers/externalInputs';
22
17
 
23
18
  export const componentName = getComponentName('email-field');
24
19
 
@@ -29,103 +24,12 @@ const customMixin = (superclass) =>
29
24
 
30
25
  this.baseElement.setAttribute('pattern', '^[\\w\\.\\%\\+\\-]+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$');
31
26
 
32
- if (!this.isNoExternalInput) {
33
- this.externalInput = this.handleExternalInput();
34
-
35
- this.addEventListener('focus', () => {
36
- this.externalInput.focus();
37
- });
38
- } else {
39
- this.setAttribute('autocomplete', this.getAutocompleteType());
40
- }
41
- }
42
-
43
- get isNoExternalInput() {
44
- return this.getAttribute('no-external-input') === 'true';
45
- }
46
-
47
- forwardInputValue(source, target) {
48
- // set internal sync events
49
- const valueDescriptor = Object.getOwnPropertyDescriptor(
50
- this.inputElement.constructor.prototype,
51
- 'value'
52
- );
53
-
54
- Object.defineProperty(source, 'value', {
55
- ...valueDescriptor,
56
-
57
- set(v) {
58
- valueDescriptor.set.call(this, v);
59
- // eslint-disable-next-line no-param-reassign
60
- target.value = v;
61
- },
62
- configurable: true,
63
- });
64
- }
65
-
66
- handleExternalInput() {
67
- // set safety attribute `external-input`
68
- this.setAttribute('external-input', 'true');
69
-
70
- // use original input element as reference
71
- const origInput = this.baseElement.querySelector('input');
72
-
73
- // to avoid focus loop between external-input and origInput
74
- // we set origInput's tabindex to -1
75
- // otherwise, shift-tab will never leave the component focus
76
- origInput.setAttribute('tabindex', '-1');
77
-
78
- // create external slot
79
- const externalInputSlot = createExternalInputSlot('external-input', 'suffix');
80
- // append external slot to base element
81
- this.baseElement.appendChild(externalInputSlot);
82
-
83
- const externalInput = createExternalInputEle(
84
- 'external-input',
85
- 'text',
86
- this.getAutocompleteType()
87
- );
88
-
89
- // apply original input's styles to external input
90
- setTimeout(() => {
91
- applyExternalInputStyles(origInput, externalInput, this.getAttribute('label-type'));
92
- });
93
-
94
- // set external input events
95
- this.handleExternalInputEvents(externalInput);
96
-
97
- // 1Password catches the internal input, so we forward the value to the external input
98
- this.forwardInputValue(origInput, externalInput);
99
-
100
- syncAttrs(origInput, externalInput, {
101
- includeAttrs: ['disabled', 'readonly', 'pattern'],
102
- });
103
-
104
- // append external input to component's DOM
105
- this.appendChild(externalInput);
106
-
107
- return externalInput;
27
+ this.setAttribute('autocomplete', this.getAutocompleteType());
108
28
  }
109
29
 
110
30
  getAutocompleteType() {
111
31
  return this.getAttribute('autocomplete') || 'username';
112
32
  }
113
-
114
- handleExternalInputEvents(externalInput) {
115
- // sync value of insible input back to original input
116
- externalInput.addEventListener('input', (e) => {
117
- this.value = e.target.value;
118
- });
119
-
120
- // sync `focused` attribute on host when focusing on external input
121
- externalInput.addEventListener('focus', () => {
122
- this.setAttribute('focused', 'true');
123
- });
124
-
125
- externalInput.addEventListener('blur', () => {
126
- this.removeAttribute('focused');
127
- });
128
- }
129
33
  };
130
34
 
131
35
  export const EmailFieldClass = compose(
@@ -133,7 +37,7 @@ export const EmailFieldClass = compose(
133
37
  mappings: textFieldMappings,
134
38
  }),
135
39
  draggableMixin,
136
- proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
40
+ proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
137
41
  componentNameValidationMixin,
138
42
  customMixin
139
43
  )(
@@ -161,10 +65,6 @@ export const EmailFieldClass = compose(
161
65
  opacity: 0;
162
66
  }
163
67
 
164
- vaadin-email-field:not([no-external-input="true"]) > input:not(:placeholder-shown) {
165
- opacity: 0;
166
- }
167
-
168
68
  :host ::slotted(*) {
169
69
  -webkit-mask-image: none;
170
70
  }
@@ -220,6 +220,7 @@ export const GridClass = compose(
220
220
  { ...rowSeparator, property: 'border-top-color' },
221
221
  ],
222
222
  resizeHandleColor: { ...resizeHandle, property: 'background-color' },
223
+ hostDirection: { ...host, property: 'direction', fallback: 'ltr' },
223
224
  },
224
225
  }),
225
226
  draggableMixin,
@@ -26,20 +26,10 @@ const customMixin = (superclass) =>
26
26
  </${descopeInternalComponentName}>
27
27
  `;
28
28
 
29
- this.setAttribute('external-input', 'true');
30
-
31
29
  this.baseElement.appendChild(template.content.cloneNode(true));
32
30
 
33
31
  this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
34
32
 
35
- // get descope input components
36
- this.passwordInput = this.inputElement.querySelector('[data-id="password"]');
37
- this.confirmInput = this.inputElement.querySelector('[data-id="confirm"]');
38
-
39
- // create slots for external password input
40
- this.createExternalInput(this.passwordInput, 'external-password-input');
41
- this.createExternalInput(this.confirmInput, 'external-confirm-input');
42
-
43
33
  forwardAttrs(this, this.inputElement, {
44
34
  includeAttrs: [
45
35
  'password-label',
@@ -63,20 +53,6 @@ const customMixin = (superclass) =>
63
53
  ],
64
54
  });
65
55
  }
66
-
67
- createExternalInput(node, slotName) {
68
- const externalInput = node.querySelector('input');
69
- const slotEle = document.createElement('slot');
70
- const targetSlot = externalInput.getAttribute('slot');
71
- slotEle.setAttribute('name', slotName);
72
- slotEle.setAttribute('slot', targetSlot);
73
- node.appendChild(slotEle);
74
-
75
- // move external input
76
- externalInput.setAttribute('slot', slotName);
77
- externalInput.setAttribute('data-hidden-input', 'true');
78
- this.appendChild(externalInput);
79
- }
80
56
  };
81
57
 
82
58
  const {
@@ -6,7 +6,7 @@ import {
6
6
  componentNameValidationMixin,
7
7
  } from '../../mixins';
8
8
  import { compose } from '../../helpers';
9
- import { getComponentName, syncAttrs } from '../../helpers/componentHelpers';
9
+ import { getComponentName } from '../../helpers/componentHelpers';
10
10
  import passwordDraggableMixin from './passwordDraggableMixin';
11
11
  import {
12
12
  resetInputLabelPosition,
@@ -14,116 +14,11 @@ import {
14
14
  useHostExternalPadding,
15
15
  inputFloatingLabelStyle,
16
16
  } from '../../helpers/themeHelpers/resetHelpers';
17
- import {
18
- applyExternalInputStyles,
19
- createExternalInputEle,
20
- createExternalInputSlot,
21
- } from '../../helpers/externalInputs';
22
17
 
23
18
  export const componentName = getComponentName('password');
24
19
 
25
20
  const customMixin = (superclass) =>
26
21
  class PasswordFieldMixinClass extends superclass {
27
- init() {
28
- super.init?.();
29
-
30
- // reset vaadin's checkValidity
31
- this.baseElement.checkValidity = () => {};
32
- // set safety attribute `external-input`
33
- this.setAttribute('external-input', 'true');
34
-
35
- // use original input element as reference
36
- const origInput = this.baseElement.querySelector('input');
37
-
38
- // to avoid focus loop between external-input and origInput
39
- // we set origInput's tabindex to -1
40
- // otherwise, shift-tab will never leave the component focus
41
- origInput.setAttribute('tabindex', '-1');
42
-
43
- // create external slot
44
- const externalInputSlot = createExternalInputSlot('external-input', 'suffix');
45
- // append external slot to base element
46
- this.baseElement.appendChild(externalInputSlot);
47
-
48
- // create external input
49
- const externalInput = createExternalInputEle(
50
- 'external-input',
51
- 'password',
52
- this.getAutocompleteType()
53
- );
54
-
55
- this.handlePasswordVisibility(externalInput);
56
-
57
- // apply original input's styles to external input
58
- setTimeout(() => {
59
- applyExternalInputStyles(origInput, externalInput, this.getAttribute('label-type'));
60
- });
61
-
62
- // set external input events
63
- this.handleExternalInputEvents(externalInput);
64
-
65
- // sync input stateful attributes: `type` (for visibility state change) and `readonly`
66
- syncAttrs(origInput, externalInput, { includeAttrs: ['type', 'readonly'] });
67
- syncAttrs(this, externalInput, { includeAttrs: ['focused'] });
68
-
69
- origInput.addEventListener('focus', (e) => {
70
- e.preventDefault();
71
- if (e.isTrusted) {
72
- externalInput.focus();
73
- }
74
- });
75
-
76
- externalInput.addEventListener('input', (e) => {
77
- if (!e.target.value) {
78
- this.removeAttribute('has-value');
79
- } else {
80
- this.setAttribute('has-value', 'true');
81
- }
82
- });
83
-
84
- // append external input to component's DOM
85
- this.appendChild(externalInput);
86
- }
87
-
88
- // override vaadin's password visibility toggle.
89
- // we need this override in order to to resolve the external input `focus` race condition,
90
- // which is caused due to the focus sync between the two inputs.
91
- handlePasswordVisibility(externalInput) {
92
- // disable vaadin's `__boundRevealButtonMouseDown` mouse-down event lisetener
93
- const origBoundRevealButtonMouseDown = this.baseElement.__boundRevealButtonMouseDown;
94
- this.baseElement
95
- .querySelector('vaadin-password-field-button')
96
- .removeEventListener('mousedown', origBoundRevealButtonMouseDown);
97
-
98
- // disable vaadin's `_passwordVisibleChanged` observer
99
- this.baseElement._passwordVisibleChanged = () => {};
100
-
101
- // override vaadin's `_togglePasswordVisibility`
102
- this.baseElement._togglePasswordVisibility = () => {
103
- const currVisibility = externalInput.getAttribute('type');
104
- if (currVisibility === 'password') {
105
- this.showPasswordVisibility(externalInput);
106
- } else {
107
- this.hidePasswordVisibility(externalInput);
108
- }
109
- };
110
-
111
- // on component blur, if password is revealed - hide it
112
- // this behaves differently from vaadin's focus handling, and checks if the blur takes the component out of focus
113
- // (which menas the click was made outside the component) or if the blur was called due to clicking the Reveal Button
114
- // and then focusing in the input again
115
- this.addEventListener('blur', () => {
116
- setTimeout(() => {
117
- const isHiddenAndFocused =
118
- externalInput.getAttribute('type') !== 'password' &&
119
- externalInput.getAttribute('focused') !== 'true';
120
- if (isHiddenAndFocused) {
121
- this.hidePasswordVisibility(externalInput);
122
- }
123
- });
124
- });
125
- }
126
-
127
22
  hidePasswordVisibility(input) {
128
23
  // handle input element's type
129
24
  input.setAttribute('type', 'password');
@@ -141,22 +36,6 @@ const customMixin = (superclass) =>
141
36
  getAutocompleteType() {
142
37
  return this.getAttribute('autocomplete') || 'current-password';
143
38
  }
144
-
145
- handleExternalInputEvents(inputEle) {
146
- // sync value of insible input back to original input
147
- inputEle.addEventListener('input', (e) => {
148
- this.value = e.target.value;
149
- });
150
-
151
- // sync `focused` attribute on host when focusing on external input
152
- inputEle.addEventListener('focus', () => {
153
- this.setAttribute('focused', 'true');
154
- });
155
-
156
- inputEle.addEventListener('blur', () => {
157
- this.removeAttribute('focused');
158
- });
159
- }
160
39
  };
161
40
 
162
41
  const {
@@ -315,10 +194,6 @@ export const PasswordClass = compose(
315
194
  ::part(reveal-button) {
316
195
  align-self: center;
317
196
  }
318
-
319
- vaadin-password-field > input:not(:placeholder-shown) {
320
- opacity: 0;
321
- }
322
197
  `,
323
198
  excludeAttrsSync: ['tabindex'],
324
199
  componentName,
@@ -51,31 +51,6 @@ const customMixin = (superclass) =>
51
51
  }
52
52
  }
53
53
  }
54
-
55
- // webauthn is not working when the native input element is nested inside multiple shadow roots
56
- // so we need to be able move the input outside the shadow root for some cases
57
- get isExternalInput() {
58
- return this.getAttribute('external-input') === 'true';
59
- }
60
-
61
- constructor() {
62
- super();
63
-
64
- if (this.isExternalInput) {
65
- const origInput = this.baseElement.querySelector('input');
66
- this.inputSlot = document.createElement('slot');
67
-
68
- this.focus = () => {
69
- origInput.focus();
70
- };
71
-
72
- this.inputSlot.setAttribute('name', 'input');
73
- this.inputSlot.setAttribute('slot', 'input');
74
- this.baseElement.appendChild(this.inputSlot);
75
-
76
- this.appendChild(origInput);
77
- }
78
- }
79
54
  };
80
55
 
81
56
  export const TextFieldClass = compose(
@@ -83,7 +58,7 @@ export const TextFieldClass = compose(
83
58
  mappings: textFieldMappings,
84
59
  }),
85
60
  draggableMixin,
86
- proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
61
+ proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
87
62
  componentNameValidationMixin,
88
63
  customMixin
89
64
  )(
@@ -9,10 +9,6 @@ const {
9
9
  errorMessage,
10
10
  disabledPlaceholder,
11
11
  inputDisabled,
12
- externalInput,
13
- externalInputDisabled,
14
- externalPlaceholder,
15
- externalDisabledPlaceholder,
16
12
  } = {
17
13
  host: { selector: () => ':host' },
18
14
  label: { selector: '::part(label)' },
@@ -27,10 +23,6 @@ const {
27
23
  inputDisabled: { selector: 'input:disabled' },
28
24
  helperText: { selector: '::part(helper-text)' },
29
25
  errorMessage: { selector: '::part(error-message)' },
30
- externalInput: { selector: () => '::slotted(input)' },
31
- externalInputDisabled: { selector: () => '::slotted(input:disabled)' },
32
- externalPlaceholder: { selector: () => '::slotted(input:placeholder-shown)' },
33
- externalDisabledPlaceholder: { selector: () => '::slotted(input:disabled::placeholder)' },
34
26
  };
35
27
 
36
28
  export default {
@@ -60,12 +52,8 @@ export default {
60
52
  inputValueTextColor: [
61
53
  { ...inputField, property: 'color' },
62
54
  { ...inputDisabled, property: '-webkit-text-fill-color' },
63
- { ...externalInputDisabled, property: '-webkit-text-fill-color' },
64
- ],
65
- inputCaretTextColor: [
66
- { ...input, property: 'color' },
67
- { ...externalInput, property: 'color' },
68
55
  ],
56
+ inputCaretTextColor: [{ ...input, property: 'color' }],
69
57
 
70
58
  labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
71
59
 
@@ -78,8 +66,6 @@ export default {
78
66
  inputHorizontalPadding: [
79
67
  { ...input, property: 'padding-left' },
80
68
  { ...input, property: 'padding-right' },
81
- { ...externalInput, property: 'padding-left' },
82
- { ...externalInput, property: 'padding-right' },
83
69
  ],
84
70
 
85
71
  inputOutlineColor: { ...inputField, property: 'outline-color' },
@@ -87,17 +73,12 @@ export default {
87
73
  inputOutlineWidth: { ...inputField, property: 'outline-width' },
88
74
  inputOutlineOffset: { ...inputField, property: 'outline-offset' },
89
75
 
90
- inputTextAlign: [
91
- { ...input, property: 'text-align' },
92
- { ...externalInput, property: 'text-align' },
93
- ],
76
+ inputTextAlign: [{ ...input, property: 'text-align' }],
94
77
 
95
78
  inputPlaceholderColor: [
96
79
  { selector: () => ':host input:placeholder-shown', property: 'color' },
97
80
  { ...placeholder, property: 'color' },
98
- { ...externalPlaceholder, property: 'color' },
99
81
  { ...disabledPlaceholder, property: '-webkit-text-fill-color' },
100
- { ...externalDisabledPlaceholder, property: '-webkit-text-fill-color' },
101
82
  ],
102
83
 
103
84
  labelPosition: { ...label, property: 'position' },
@@ -109,20 +90,8 @@ export default {
109
90
  inputTransformY: { ...label, property: 'transform' },
110
91
  inputTransition: { ...label, property: 'transition' },
111
92
  marginInlineStart: { ...label, property: 'margin-inline-start' },
112
- placeholderOpacity: [
113
- { selector: '> input:placeholder-shown', property: 'opacity' },
114
- { ...externalPlaceholder, property: 'opacity' },
115
- ],
116
- inputVerticalAlignment: [
117
- { ...inputField, property: 'align-items' },
118
- { ...externalInput, property: 'align-items' },
119
- ],
120
- valueInputHeight: [
121
- { ...input, property: 'height' },
122
- { ...externalInput, property: 'height' },
123
- ],
124
- valueInputMarginBottom: [
125
- { ...input, property: 'margin-bottom' },
126
- { ...externalInput, property: 'margin-bottom' },
127
- ],
93
+ placeholderOpacity: [{ selector: '> input:placeholder-shown', property: 'opacity' }],
94
+ inputVerticalAlignment: [{ ...inputField, property: 'align-items' }],
95
+ valueInputHeight: [{ ...input, property: 'height' }],
96
+ valueInputMarginBottom: [{ ...input, property: 'margin-bottom' }],
128
97
  };
@@ -68,7 +68,6 @@ const {
68
68
  inputField,
69
69
  countryCodeInput,
70
70
  phoneInput,
71
- phoneExternalInput,
72
71
  separator,
73
72
  errorMessage,
74
73
  helperText,
@@ -78,7 +77,6 @@ const {
78
77
  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
79
78
  inputField: { selector: '::part(input-field)' },
80
79
  phoneInput: { selector: () => 'descope-text-field' },
81
- phoneExternalInput: { selector: () => '::slotted(input)' },
82
80
  countryCodeInput: { selector: () => 'descope-combo-box' },
83
81
  separator: { selector: 'descope-phone-field-internal .separator' },
84
82
  helperText: { selector: '::part(helper-text)' },
@@ -168,17 +166,10 @@ export const PhoneFieldClass = compose(
168
166
  inputOutlineWidth: { ...inputField, property: 'outline-width' },
169
167
  inputOutlineOffset: { ...inputField, property: 'outline-offset' },
170
168
 
171
- valueInputHeight: [
172
- { ...phoneExternalInput, property: textVars.valueInputHeight },
173
- { ...countryCodeInput, property: comboVars.valueInputHeight },
174
- ],
175
- valueInputMarginBottom: [
176
- { ...phoneInput, property: textVars.valueInputMarginBottom },
177
- { ...phoneExternalInput, property: 'margin-bottom' },
178
- ],
169
+ valueInputHeight: [{ ...countryCodeInput, property: comboVars.valueInputHeight }],
170
+ valueInputMarginBottom: [{ ...phoneInput, property: textVars.valueInputMarginBottom }],
179
171
  marginInlineStart: [
180
172
  { ...phoneInput, property: textVars.marginInlineStart },
181
- { ...phoneExternalInput, property: 'margin-inline-start' },
182
173
  { ...countryCodeInput, property: comboVars.marginInlineStart },
183
174
  ],
184
175
  },
@@ -1,5 +1,5 @@
1
1
  import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';
2
- import { forwardAttrs, getComponentName, syncAttrs } from '../../../../helpers/componentHelpers';
2
+ import { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';
3
3
  import CountryCodes from '../../CountryCodes';
4
4
  import { comboBoxItem } from '../helpers';
5
5
 
@@ -36,7 +36,7 @@ class PhoneFieldInternal extends BaseInputClass {
36
36
  ${CountryCodes.map((item) => comboBoxItem(item)).join('')}
37
37
  </descope-combo-box>
38
38
  <div class="separator"></div>
39
- <descope-text-field type="tel" external-input="true"></descope-text-field>
39
+ <descope-text-field type="tel"></descope-text-field>
40
40
  </div>
41
41
  `;
42
42
 
@@ -47,9 +47,6 @@ class PhoneFieldInternal extends BaseInputClass {
47
47
  forwardAttrs(this, this.countryCodeInput, { includeAttrs: ['label-type'] });
48
48
  forwardAttrs(this, this.phoneNumberInput, { includeAttrs: ['label-type'] });
49
49
 
50
- const externalInput = this.phoneNumberInput.querySelector('input');
51
- syncAttrs(this.phoneNumberInput, externalInput, { includeAttrs: ['focused'] });
52
-
53
50
  // override combo box setter to display dialCode value in input
54
51
  this.countryCodeInput.customValueTransformFn = (val) => {
55
52
  const [, dialCode] = val?.split?.(' ') || [];
@@ -31,7 +31,7 @@ class PhoneFieldInternal extends BaseInputClass {
31
31
 
32
32
  this.innerHTML = `
33
33
  <div>
34
- <descope-text-field tabindex="1" external-input="true"></descope-text-field>
34
+ <descope-text-field tabindex="1"></descope-text-field>
35
35
  </div>
36
36
  `;
37
37