@descope/web-components-ui 1.0.332 → 1.0.333

package/dist/umd/descope-email-field-index-js.js

@@ -1,5 +1,5 @@
 /*! For license information please see descope-email-field-index-js.js.LICENSE.txt */
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[9760],{77840:(t,e,n)=>{n.r(e),n.d(e,{EmailFieldClass:()=>b}),n(58725);var r=n(83208),i=n(46570);const l=i.iv`
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[9760],{77840:(t,e,n)=>{n.r(e),n.d(e,{EmailFieldClass:()=>b}),n(58725);var r=n(83208),i=n(46570);const o=i.iv`
   :host([dir='rtl']) [part='input-field'] ::slotted(input) {
     --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
   }
@@ -7,7 +7,7 @@
   :host([dir='rtl']) [part='input-field'] ::slotted(input:placeholder-shown) {
     --_lumo-text-field-overflow-mask-image: none;
   }
-`;(0,i.hC)("vaadin-email-field",[r.J,l],{moduleId:"lumo-email-field"});var o=n(52807),a=n(18005);const s=n(9392).iv`
+`;(0,i.hC)("vaadin-email-field",[r.J,o],{moduleId:"lumo-email-field"});var l=n(52807),a=n(18005);const s=n(9392).iv`
   :host([dir='rtl']) [part='input-field'] {
     direction: ltr;
   }
@@ -16,7 +16,7 @@
     direction: rtl;
     text-align: left;
   }
-`;(0,i.hC)("vaadin-email-field",s,{moduleId:"vaadin-email-field-styles"});class p extends a.n{static get is(){return"vaadin-email-field"}constructor(){super(),this._setType("email"),this.pattern="^([a-zA-Z0-9_\\.\\-+])+@[a-zA-Z0-9\\-.]+\\.[a-zA-Z0-9\\-]{2,}$"}ready(){super.ready(),this.inputElement&&(this.inputElement.autocapitalize="off")}}(0,o.M)(p);var d=n(94978),u=n(4447),c=n(2061),h=n(54567),f=n(54201),g=n(85423);const y=(0,h.iY)("email-field"),b=(0,c.qC)((0,d.yk)({mappings:u.Z}),d.e4,(0,d.dj)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),d.Ae,(t=>class extends t{init(){super.init?.(),this.baseElement.setAttribute("pattern","^[\\w\\.\\%\\+\\-]+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$"),this.externalInput=this.handleExternalInput(),this.addEventListener("focus",(()=>{this.externalInput.focus()}))}forwardInputValue(t,e){const n=Object.getOwnPropertyDescriptor(this.inputElement.constructor.prototype,"value");Object.defineProperty(t,"value",{...n,set(t){n.set.call(this,t),e.value=t},configurable:!0})}handleExternalInput(){this.setAttribute("external-input","true");const t=this.baseElement.querySelector("input");t.setAttribute("tabindex","-1");const e=(0,g.nC)("external-input","suffix");this.baseElement.appendChild(e);const n=(0,g.X$)("external-input","text",this.getAutocompleteType());return setTimeout((()=>{(0,g.Gc)(t,n,this.getAttribute("label-type"))})),this.handleExternalInputEvents(n),this.forwardInputValue(t,n),(0,h.tg)(t,n,{includeAttrs:["disabled","readonly","pattern"]}),this.appendChild(n),n}getAutocompleteType(){return this.getAttribute("autocomplete")||"username"}handleExternalInputEvents(t){t.addEventListener("input",(t=>{this.value=t.target.value})),t.addEventListener("focus",(()=>{this.setAttribute("focused","true")})),t.addEventListener("blur",(()=>{this.removeAttribute("focused")}))}}))((0,d.DM)({slots:["","suffix"],wrappedEleName:"vaadin-email-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${b.cssVarList.inputOutlineWidth}) + var(${b.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      ${(0,f.Wf)("vaadin-email-field")}\n\t\t\t${(0,f.bi)(b.cssVarList)}\n\t\t\t${(0,f.wm)("vaadin-email-field",b.cssVarList)}\n      ${(0,f.bz)()}\n\n      vaadin-email-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }        \n      vaadin-email-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n\n      vaadin-email-field > input:not(:placeholder-shown) {\n        opacity: 0;\n      }\n\n      :host ::slotted(*) {\n        -webkit-mask-image: none;\n      }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:y}));customElements.define(y,b)},4447:(t,e,n)=>{n.d(e,{Z:()=>b});const{host:r,label:i,placeholder:l,requiredIndicator:o,inputField:a,input:s,helperText:p,errorMessage:d,disabledPlaceholder:u,inputDisabled:c,externalInput:h,externalInputDisabled:f,externalPlaceholder:g,externalDisabledPlaceholder:y}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},placeholder:[{selector:"> input:placeholder-shown"},{selector:()=>":host::slotted(input:placeholder-shown)"}],disabledPlaceholder:{selector:"> input:disabled::placeholder"},inputField:{selector:"::part(input-field)"},input:{selector:"input"},inputDisabled:{selector:"input:disabled"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"},externalInput:{selector:()=>"::slotted(input)"},externalInputDisabled:{selector:()=>"::slotted(input:disabled)"},externalPlaceholder:{selector:()=>"::slotted(input:placeholder-shown)"},externalDisabledPlaceholder:{selector:()=>"::slotted(input:disabled::placeholder)"}},b={fontSize:[{},r],fontFamily:[i,a,p,d],labelFontSize:{...i,property:"font-size"},labelFontWeight:{...i,property:"font-weight"},labelTextColor:[{...i,property:"color"},{...o,property:"color"},{...i,property:"-webkit-text-fill-color"},{...o,property:"-webkit-text-fill-color"}],hostWidth:{...r,property:"width"},hostMinWidth:{...r,property:"min-width"},hostDirection:{...r,property:"direction"},inputBackgroundColor:{...a,property:"background-color"},errorMessageTextColor:{...d,property:"color"},helperTextColor:{...p,property:"-webkit-text-fill-color"},inputValueTextColor:[{...a,property:"color"},{...c,property:"-webkit-text-fill-color"},{...f,property:"-webkit-text-fill-color"}],inputCaretTextColor:[{...s,property:"color"},{...h,property:"color"}],labelRequiredIndicator:{...o,property:"content"},inputBorderColor:{...a,property:"border-color"},inputBorderWidth:{...a,property:"border-width"},inputBorderStyle:{...a,property:"border-style"},inputBorderRadius:{...a,property:"border-radius"},inputHeight:{...a,property:"height"},inputHorizontalPadding:[{...s,property:"padding-left"},{...s,property:"padding-right"},{...h,property:"padding-left"},{...h,property:"padding-right"}],inputOutlineColor:{...a,property:"outline-color"},inputOutlineStyle:{...a,property:"outline-style"},inputOutlineWidth:{...a,property:"outline-width"},inputOutlineOffset:{...a,property:"outline-offset"},inputTextAlign:[{...s,property:"text-align"},{...h,property:"text-align"}],inputPlaceholderColor:[{selector:()=>":host input:placeholder-shown",property:"color"},{...l,property:"color"},{...g,property:"color"},{...u,property:"-webkit-text-fill-color"},{...y,property:"-webkit-text-fill-color"}],labelPosition:{...i,property:"position"},labelTopPosition:{...i,property:"top"},labelHorizontalPosition:[{...i,property:"left"},{...i,property:"right"}],inputTransformY:{...i,property:"transform"},inputTransition:{...i,property:"transition"},marginInlineStart:{...i,property:"margin-inline-start"},placeholderOpacity:[{selector:"> input:placeholder-shown",property:"opacity"},{...g,property:"opacity"}],inputVerticalAlignment:[{...a,property:"align-items"},{...h,property:"align-items"}],valueInputHeight:[{...s,property:"height"},{...h,property:"height"}],valueInputMarginBottom:[{...s,property:"margin-bottom"},{...h,property:"margin-bottom"}]}},85423:(t,e,n)=>{n.d(e,{Gc:()=>l,X$:()=>i,nC:()=>r});const r=(t,e)=>{const n=document.createElement("slot");return n.setAttribute("name",t),n.setAttribute("slot",e),n},i=(t,e,n)=>{const r=document.createElement("input");return r.setAttribute("slot",t),r.setAttribute("type",e),r.setAttribute("data-hidden-input","true"),r.setAttribute("autocomplete",n),r},l=(t,e,n)=>{const r=getComputedStyle(t),i=r.getPropertyValue("height"),l=r.getPropertyValue("padding-left"),o=r.getPropertyValue("padding-right"),a=r.getPropertyValue("font-size"),s=r.getPropertyValue("font-family"),p=r.getPropertyValue("letter-spacing"),d=r.getPropertyValue("caret-color"),u=((t,e)=>{t.value="_";const n=e.getPropertyValue("color");return t.value="",n})(t,r);if([["all","unset"],["position","absolute"],["background-color","transparent"],["height",i],["left",l],["right",o],["font-size",a],["font-family",s],["letter-spacing",p],["width",`calc(100% - ${l} - ${o}`],["caret-color",d],["color",u]].forEach((([t,n])=>e.style.setProperty(t,n,"important"))),"floating"===n){const t=r.getPropertyValue("margin-bottom");e.style.setProperty("margin-bottom",t,"important")}}},54201:(t,e,n)=>{n.d(e,{B:()=>d,DY:()=>s,PH:()=>p,Pd:()=>o,TX:()=>i,Wf:()=>c,bi:()=>r,bz:()=>h,jI:()=>a,jl:()=>l,wm:()=>u});const r=t=>`\n    :host {\n        padding: calc(var(${t.inputOutlineWidth}) + var(${t.inputOutlineOffset}))\n    }\n`,i=t=>`\n    ${t} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,l=t=>`\n    ${t}::part(input-field) {\n        overflow: hidden;\n        padding: 0;\n        box-shadow: none;\n    }\n`,o=t=>`\n    ${t} > label,\n    ${t}::part(label),\n    ${t}::part(required-indicator) {\n        cursor: pointer;\n    }\n`,a=(t,e="input")=>`\n    ${t}[disabled] > ${e}:placeholder-shown,\n\t${t}[readonly] > ${e}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,s=()=>"\n    :host {\n        --vaadin-field-default-width: auto;\n        box-sizing: border-box;\n    }\n",p=t=>`\n    ${t}::part(input-field)::after {\n        opacity: 0;\n    }\n`,d=t=>`\n    ${t}::part(input-field)::after {\n        background: none;\n    }\n`,u=(t,e)=>`\n    ${i(t)}\n    ${o(t)}\n    ${a(t)}\n    ${l(t)}\n    ${((t,e)=>`\n    ${t} input:-webkit-autofill,\n    ${t} input:-webkit-autofill::first-line,\n    ${t} input:-webkit-autofill:hover,\n    ${t} input:-webkit-autofill:active,\n    ${t} input:-webkit-autofill:focus {\n        -webkit-text-fill-color: var(${e.inputValueTextColor});\n        box-shadow: 0 0 0 var(${e.inputHeight}) var(${e.inputBackgroundColor}) inset;\n    }\n`)(t,e)}\n    ${d(t)}\n    ${(t=>`\n    ${t}::before {\n\t\theight: unset;\n\t}\n`)(t)}\n    ${(t=>`\n    ${t} > input {\n        -webkit-mask-image: none;\n        min-height: 0;\n        box-sizing: border-box;\n    }\n`)(t)}\n    ${(t=>`\n    ${t}::part(input-field)::after {\n        border: none;\n    }\n`)(t)}\n`,c=t=>`\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n    :host([required]) ::part(required-indicator) {\n      width: 1em;\n      display: inline-flex;\n    }\n    :host([required]) ::part(required-indicator)::after {\n      position: static;\n    }\n    :host([has-label]) ::part(label) {\n      padding-right: 0;\n      padding-bottom: 0;\n      display: flex;\n      width: 100%;\n    }\n    ${t} [slot="label"] {\n      max-width: calc(100% - 1em);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      padding-bottom: 0.5em;\n    }\n`,h=()=>'\n  :host([label-type="floating"]) {\n    position: relative;\n  }\n  :host([label-type="floating"][has-label]) [slot="label"] {\n    padding: 0;\n  }\n  :host([label-type="floating"][has-label]) > ::part(label) {\n    z-index: 1;\n    padding: 0;\n  }\n  '},73208:(t,e,n)=>{n.d(e,{b:()=>i});var r=n(78591);class i extends r.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:()=>i});var r=n(73406);const i=t=>class extends((0,r.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:()=>h}),n(13553);var r=n(74241),i=n(52807),l=n(12521),o=n(34463),a=n(62743),s=n(46570),p=n(73208),d=n(20422),u=n(46729);const c=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 p.b(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new u.v(this.inputElement,this._labelController))}};(0,s.hC)("vaadin-text-field",a.J,{moduleId:"vaadin-text-field-styles"});class h extends(c((0,s.Tb)((0,l.S)(r.H3)))){static get is(){return"vaadin-text-field"}static get template(){return r.dy`
+`;(0,i.hC)("vaadin-email-field",s,{moduleId:"vaadin-email-field-styles"});class p extends a.n{static get is(){return"vaadin-email-field"}constructor(){super(),this._setType("email"),this.pattern="^([a-zA-Z0-9_\\.\\-+])+@[a-zA-Z0-9\\-.]+\\.[a-zA-Z0-9\\-]{2,}$"}ready(){super.ready(),this.inputElement&&(this.inputElement.autocapitalize="off")}}(0,l.M)(p);var d=n(94978),u=n(4447),c=n(2061),h=n(54567),g=n(54201),y=n(85423);const f=(0,h.iY)("email-field"),b=(0,c.qC)((0,d.yk)({mappings:u.Z}),d.e4,(0,d.dj)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),d.Ae,(t=>class extends t{init(){super.init?.(),this.baseElement.setAttribute("pattern","^[\\w\\.\\%\\+\\-]+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$"),this.isNoExternalInput?this.setAttribute("autocomplete",this.getAutocompleteType()):(this.externalInput=this.handleExternalInput(),this.addEventListener("focus",(()=>{this.externalInput.focus()})))}get isNoExternalInput(){return"true"===this.getAttribute("no-external-input")}forwardInputValue(t,e){const n=Object.getOwnPropertyDescriptor(this.inputElement.constructor.prototype,"value");Object.defineProperty(t,"value",{...n,set(t){n.set.call(this,t),e.value=t},configurable:!0})}handleExternalInput(){this.setAttribute("external-input","true");const t=this.baseElement.querySelector("input");t.setAttribute("tabindex","-1");const e=(0,y.nC)("external-input","suffix");this.baseElement.appendChild(e);const n=(0,y.X$)("external-input","text",this.getAutocompleteType());return setTimeout((()=>{(0,y.Gc)(t,n,this.getAttribute("label-type"))})),this.handleExternalInputEvents(n),this.forwardInputValue(t,n),(0,h.tg)(t,n,{includeAttrs:["disabled","readonly","pattern"]}),this.appendChild(n),n}getAutocompleteType(){return this.getAttribute("autocomplete")||"username"}handleExternalInputEvents(t){t.addEventListener("input",(t=>{this.value=t.target.value})),t.addEventListener("focus",(()=>{this.setAttribute("focused","true")})),t.addEventListener("blur",(()=>{this.removeAttribute("focused")}))}}))((0,d.DM)({slots:["","suffix"],wrappedEleName:"vaadin-email-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${b.cssVarList.inputOutlineWidth}) + var(${b.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      ${(0,g.Wf)("vaadin-email-field")}\n\t\t\t${(0,g.bi)(b.cssVarList)}\n\t\t\t${(0,g.wm)("vaadin-email-field",b.cssVarList)}\n      ${(0,g.bz)()}\n\n      vaadin-email-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }        \n      vaadin-email-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n\n      vaadin-email-field:not([no-external-input="true"]) > input:not(:placeholder-shown) {\n        opacity: 0;\n      }\n\n      :host ::slotted(*) {\n        -webkit-mask-image: none;\n      }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:f}));customElements.define(f,b)},4447:(t,e,n)=>{n.d(e,{Z:()=>b});const{host:r,label:i,placeholder:o,requiredIndicator:l,inputField:a,input:s,helperText:p,errorMessage:d,disabledPlaceholder:u,inputDisabled:c,externalInput:h,externalInputDisabled:g,externalPlaceholder:y,externalDisabledPlaceholder:f}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},placeholder:[{selector:"> input:placeholder-shown"},{selector:()=>":host::slotted(input:placeholder-shown)"}],disabledPlaceholder:{selector:"> input:disabled::placeholder"},inputField:{selector:"::part(input-field)"},input:{selector:"input"},inputDisabled:{selector:"input:disabled"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"},externalInput:{selector:()=>"::slotted(input)"},externalInputDisabled:{selector:()=>"::slotted(input:disabled)"},externalPlaceholder:{selector:()=>"::slotted(input:placeholder-shown)"},externalDisabledPlaceholder:{selector:()=>"::slotted(input:disabled::placeholder)"}},b={fontSize:[{},r],fontFamily:[i,a,p,d],labelFontSize:{...i,property:"font-size"},labelFontWeight:{...i,property:"font-weight"},labelTextColor:[{...i,property:"color"},{...l,property:"color"},{...i,property:"-webkit-text-fill-color"},{...l,property:"-webkit-text-fill-color"}],hostWidth:{...r,property:"width"},hostMinWidth:{...r,property:"min-width"},hostDirection:{...r,property:"direction"},inputBackgroundColor:{...a,property:"background-color"},errorMessageTextColor:{...d,property:"color"},helperTextColor:{...p,property:"-webkit-text-fill-color"},inputValueTextColor:[{...a,property:"color"},{...c,property:"-webkit-text-fill-color"},{...g,property:"-webkit-text-fill-color"}],inputCaretTextColor:[{...s,property:"color"},{...h,property:"color"}],labelRequiredIndicator:{...l,property:"content"},inputBorderColor:{...a,property:"border-color"},inputBorderWidth:{...a,property:"border-width"},inputBorderStyle:{...a,property:"border-style"},inputBorderRadius:{...a,property:"border-radius"},inputHeight:{...a,property:"height"},inputHorizontalPadding:[{...s,property:"padding-left"},{...s,property:"padding-right"},{...h,property:"padding-left"},{...h,property:"padding-right"}],inputOutlineColor:{...a,property:"outline-color"},inputOutlineStyle:{...a,property:"outline-style"},inputOutlineWidth:{...a,property:"outline-width"},inputOutlineOffset:{...a,property:"outline-offset"},inputTextAlign:[{...s,property:"text-align"},{...h,property:"text-align"}],inputPlaceholderColor:[{selector:()=>":host input:placeholder-shown",property:"color"},{...o,property:"color"},{...y,property:"color"},{...u,property:"-webkit-text-fill-color"},{...f,property:"-webkit-text-fill-color"}],labelPosition:{...i,property:"position"},labelTopPosition:{...i,property:"top"},labelHorizontalPosition:[{...i,property:"left"},{...i,property:"right"}],inputTransformY:{...i,property:"transform"},inputTransition:{...i,property:"transition"},marginInlineStart:{...i,property:"margin-inline-start"},placeholderOpacity:[{selector:"> input:placeholder-shown",property:"opacity"},{...y,property:"opacity"}],inputVerticalAlignment:[{...a,property:"align-items"},{...h,property:"align-items"}],valueInputHeight:[{...s,property:"height"},{...h,property:"height"}],valueInputMarginBottom:[{...s,property:"margin-bottom"},{...h,property:"margin-bottom"}]}},85423:(t,e,n)=>{n.d(e,{Gc:()=>o,X$:()=>i,nC:()=>r});const r=(t,e)=>{const n=document.createElement("slot");return n.setAttribute("name",t),n.setAttribute("slot",e),n},i=(t,e,n)=>{const r=document.createElement("input");return r.setAttribute("slot",t),r.setAttribute("type",e),r.setAttribute("data-hidden-input","true"),r.setAttribute("autocomplete",n),r},o=(t,e,n)=>{const r=getComputedStyle(t),i=r.getPropertyValue("height"),o=r.getPropertyValue("padding-left"),l=r.getPropertyValue("padding-right"),a=r.getPropertyValue("font-size"),s=r.getPropertyValue("font-family"),p=r.getPropertyValue("letter-spacing"),d=r.getPropertyValue("caret-color"),u=((t,e)=>{t.value="_";const n=e.getPropertyValue("color");return t.value="",n})(t,r);if([["all","unset"],["position","absolute"],["background-color","transparent"],["height",i],["left",o],["right",l],["font-size",a],["font-family",s],["letter-spacing",p],["width",`calc(100% - ${o} - ${l}`],["caret-color",d],["color",u]].forEach((([t,n])=>e.style.setProperty(t,n,"important"))),"floating"===n){const t=r.getPropertyValue("margin-bottom");e.style.setProperty("margin-bottom",t,"important")}}},54201:(t,e,n)=>{n.d(e,{B:()=>d,DY:()=>s,PH:()=>p,Pd:()=>l,TX:()=>i,Wf:()=>c,bi:()=>r,bz:()=>h,jI:()=>a,jl:()=>o,wm:()=>u});const r=t=>`\n    :host {\n        padding: calc(var(${t.inputOutlineWidth}) + var(${t.inputOutlineOffset}))\n    }\n`,i=t=>`\n    ${t} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,o=t=>`\n    ${t}::part(input-field) {\n        overflow: hidden;\n        padding: 0;\n        box-shadow: none;\n    }\n`,l=t=>`\n    ${t} > label,\n    ${t}::part(label),\n    ${t}::part(required-indicator) {\n        cursor: pointer;\n    }\n`,a=(t,e="input")=>`\n    ${t}[disabled] > ${e}:placeholder-shown,\n\t${t}[readonly] > ${e}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,s=()=>"\n    :host {\n        --vaadin-field-default-width: auto;\n        box-sizing: border-box;\n    }\n",p=t=>`\n    ${t}::part(input-field)::after {\n        opacity: 0;\n    }\n`,d=t=>`\n    ${t}::part(input-field)::after {\n        background: none;\n    }\n`,u=(t,e)=>`\n    ${i(t)}\n    ${l(t)}\n    ${a(t)}\n    ${o(t)}\n    ${((t,e)=>`\n    ${t} input:-webkit-autofill,\n    ${t} input:-webkit-autofill::first-line,\n    ${t} input:-webkit-autofill:hover,\n    ${t} input:-webkit-autofill:active,\n    ${t} input:-webkit-autofill:focus {\n        -webkit-text-fill-color: var(${e.inputValueTextColor});\n        box-shadow: 0 0 0 var(${e.inputHeight}) var(${e.inputBackgroundColor}) inset;\n    }\n`)(t,e)}\n    ${d(t)}\n    ${(t=>`\n    ${t}::before {\n\t\theight: unset;\n\t}\n`)(t)}\n    ${(t=>`\n    ${t} > input {\n        -webkit-mask-image: none;\n        min-height: 0;\n        box-sizing: border-box;\n    }\n`)(t)}\n    ${(t=>`\n    ${t}::part(input-field)::after {\n        border: none;\n    }\n`)(t)}\n`,c=t=>`\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n    :host([required]) ::part(required-indicator) {\n      width: 1em;\n      display: inline-flex;\n    }\n    :host([required]) ::part(required-indicator)::after {\n      position: static;\n    }\n    :host([has-label]) ::part(label) {\n      padding-right: 0;\n      padding-bottom: 0;\n      display: flex;\n      width: 100%;\n    }\n    ${t} [slot="label"] {\n      max-width: calc(100% - 1em);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      padding-bottom: 0.5em;\n    }\n`,h=()=>'\n  :host([label-type="floating"]) {\n    position: relative;\n  }\n  :host([label-type="floating"][has-label]) [slot="label"] {\n    padding: 0;\n  }\n  :host([label-type="floating"][has-label]) > ::part(label) {\n    z-index: 1;\n    padding: 0;\n  }\n  '},73208:(t,e,n)=>{n.d(e,{b:()=>i});var r=n(78591);class i extends r.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:()=>i});var r=n(73406);const i=t=>class extends((0,r.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:()=>h}),n(13553);var r=n(74241),i=n(52807),o=n(12521),l=n(34463),a=n(62743),s=n(46570),p=n(73208),d=n(20422),u=n(46729);const c=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 p.b(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new u.v(this.inputElement,this._labelController))}};(0,s.hC)("vaadin-text-field",a.J,{moduleId:"vaadin-text-field-styles"});class h extends(c((0,s.Tb)((0,o.S)(r.H3)))){static get is(){return"vaadin-text-field"}static get template(){return r.dy`
       <style>
         [part='input-field'] {
           flex-grow: 0;
@@ -51,4 +51,4 @@
         </div>
       </div>
       <slot name="tooltip"></slot>
-    `}static get properties(){return{maxlength:{type:Number},minlength:{type:Number}}}ready(){super.ready(),this._tooltipController=new o.f(this),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this.addController(this._tooltipController)}}(0,i.M)(h)},58725:(t,e,n)=>{n(21578);var r=n(83208);(0,n(46570).hC)("vaadin-text-field",r.J,{moduleId:"lumo-text-field-styles"}),n(18005)}}]);
+    `}static get properties(){return{maxlength:{type:Number},minlength:{type:Number}}}ready(){super.ready(),this._tooltipController=new l.f(this),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this.addController(this._tooltipController)}}(0,i.M)(h)},58725:(t,e,n)=>{n(21578);var r=n(83208);(0,n(46570).hC)("vaadin-text-field",r.J,{moduleId:"lumo-text-field-styles"}),n(18005)}}]);

package/package.json

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

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

@@ -29,11 +29,19 @@ const customMixin = (superclass) =>
 
       this.baseElement.setAttribute('pattern', '^[\\w\\.\\%\\+\\-]+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$');
 
-      this.externalInput = this.handleExternalInput();
+      if (!this.isNoExternalInput) {
+        this.externalInput = this.handleExternalInput();
+
+        this.addEventListener('focus', () => {
+          this.externalInput.focus();
+        });
+      } else {
+        this.setAttribute('autocomplete', this.getAutocompleteType());
+      }
+    }
 
-      this.addEventListener('focus', () => {
-        this.externalInput.focus();
-      });
+    get isNoExternalInput() {
+      return this.getAttribute('no-external-input') === 'true';
     }
 
     forwardInputValue(source, target) {
@@ -153,7 +161,7 @@ export const EmailFieldClass = compose(
         opacity: 0;
       }
 
-      vaadin-email-field > input:not(:placeholder-shown) {
+      vaadin-email-field:not([no-external-input="true"]) > input:not(:placeholder-shown) {
         opacity: 0;
       }