@authhero/widget 0.33.0 → 0.34.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/dist/authhero-widget/authhero-widget.esm.js +1 -1
  2. package/dist/authhero-widget/index.esm.js +1 -1
  3. package/dist/authhero-widget/p-52a70476.entry.js +1 -0
  4. package/dist/authhero-widget/p-f6babd26.entry.js +1 -0
  5. package/dist/cjs/authhero-node.cjs.entry.js +82 -5
  6. package/dist/cjs/authhero-widget.cjs.entry.js +49 -2
  7. package/dist/cjs/authhero-widget.cjs.js +1 -1
  8. package/dist/cjs/index.cjs.js +1 -1
  9. package/dist/cjs/loader.cjs.js +1 -1
  10. package/dist/collection/components/authhero-node/authhero-node.css +116 -1
  11. package/dist/collection/components/authhero-node/authhero-node.js +84 -2
  12. package/dist/collection/components/authhero-widget/authhero-widget.css +47 -0
  13. package/dist/collection/components/authhero-widget/authhero-widget.js +52 -4
  14. package/dist/components/authhero-node.js +1 -1
  15. package/dist/components/authhero-widget.js +1 -1
  16. package/dist/components/index.js +1 -1
  17. package/dist/components/p-BqdJX4cC.js +1 -0
  18. package/dist/esm/authhero-node.entry.js +83 -6
  19. package/dist/esm/authhero-widget.entry.js +49 -2
  20. package/dist/esm/authhero-widget.js +1 -1
  21. package/dist/esm/index.js +1 -1
  22. package/dist/esm/loader.js +1 -1
  23. package/dist/types/components/authhero-node/authhero-node.d.ts +12 -0
  24. package/dist/types/components/authhero-widget/authhero-widget.d.ts +10 -0
  25. package/dist/types/components.d.ts +0 -6
  26. package/dist/types/types/components.d.ts +1 -1
  27. package/hydrate/index.js +133 -8
  28. package/hydrate/index.mjs +133 -8
  29. package/package.json +2 -2
  30. package/dist/authhero-widget/p-1fc7fcdb.entry.js +0 -1
  31. package/dist/authhero-widget/p-5a319adc.entry.js +0 -1
  32. package/dist/components/p-BzbxtmOP.js +0 -1
@@ -0,0 +1 @@
1
+ import{t as e,p as a,H as o,c as t,h as i}from"./p-cKZ5hFj1.js";const n=[{code:"US",dialCode:"+1",name:"United States"},{code:"CA",dialCode:"+1",name:"Canada"},{code:"AG",dialCode:"+1",name:"Antigua and Barbuda"},{code:"BS",dialCode:"+1",name:"Bahamas"},{code:"BB",dialCode:"+1",name:"Barbados"},{code:"DM",dialCode:"+1",name:"Dominica"},{code:"DO",dialCode:"+1",name:"Dominican Republic"},{code:"GD",dialCode:"+1",name:"Grenada"},{code:"JM",dialCode:"+1",name:"Jamaica"},{code:"KN",dialCode:"+1",name:"Saint Kitts and Nevis"},{code:"LC",dialCode:"+1",name:"Saint Lucia"},{code:"VC",dialCode:"+1",name:"Saint Vincent and the Grenadines"},{code:"TT",dialCode:"+1",name:"Trinidad and Tobago"},{code:"PR",dialCode:"+1",name:"Puerto Rico"},{code:"KZ",dialCode:"+7",name:"Kazakhstan"},{code:"RU",dialCode:"+7",name:"Russia"},{code:"EG",dialCode:"+20",name:"Egypt"},{code:"ZA",dialCode:"+27",name:"South Africa"},{code:"GR",dialCode:"+30",name:"Greece"},{code:"NL",dialCode:"+31",name:"Netherlands"},{code:"BE",dialCode:"+32",name:"Belgium"},{code:"FR",dialCode:"+33",name:"France"},{code:"ES",dialCode:"+34",name:"Spain"},{code:"HU",dialCode:"+36",name:"Hungary"},{code:"IT",dialCode:"+39",name:"Italy"},{code:"RO",dialCode:"+40",name:"Romania"},{code:"CH",dialCode:"+41",name:"Switzerland"},{code:"AT",dialCode:"+43",name:"Austria"},{code:"GB",dialCode:"+44",name:"United Kingdom"},{code:"DK",dialCode:"+45",name:"Denmark"},{code:"SE",dialCode:"+46",name:"Sweden"},{code:"NO",dialCode:"+47",name:"Norway"},{code:"PL",dialCode:"+48",name:"Poland"},{code:"DE",dialCode:"+49",name:"Germany"},{code:"PE",dialCode:"+51",name:"Peru"},{code:"MX",dialCode:"+52",name:"Mexico"},{code:"CU",dialCode:"+53",name:"Cuba"},{code:"AR",dialCode:"+54",name:"Argentina"},{code:"BR",dialCode:"+55",name:"Brazil"},{code:"CL",dialCode:"+56",name:"Chile"},{code:"CO",dialCode:"+57",name:"Colombia"},{code:"VE",dialCode:"+58",name:"Venezuela"},{code:"MY",dialCode:"+60",name:"Malaysia"},{code:"AU",dialCode:"+61",name:"Australia"},{code:"ID",dialCode:"+62",name:"Indonesia"},{code:"PH",dialCode:"+63",name:"Philippines"},{code:"NZ",dialCode:"+64",name:"New Zealand"},{code:"SG",dialCode:"+65",name:"Singapore"},{code:"TH",dialCode:"+66",name:"Thailand"},{code:"JP",dialCode:"+81",name:"Japan"},{code:"KR",dialCode:"+82",name:"South Korea"},{code:"VN",dialCode:"+84",name:"Vietnam"},{code:"CN",dialCode:"+86",name:"China"},{code:"TR",dialCode:"+90",name:"Turkey"},{code:"IN",dialCode:"+91",name:"India"},{code:"PK",dialCode:"+92",name:"Pakistan"},{code:"AF",dialCode:"+93",name:"Afghanistan"},{code:"LK",dialCode:"+94",name:"Sri Lanka"},{code:"MM",dialCode:"+95",name:"Myanmar"},{code:"IR",dialCode:"+98",name:"Iran"},{code:"SS",dialCode:"+211",name:"South Sudan"},{code:"MA",dialCode:"+212",name:"Morocco"},{code:"DZ",dialCode:"+213",name:"Algeria"},{code:"TN",dialCode:"+216",name:"Tunisia"},{code:"LY",dialCode:"+218",name:"Libya"},{code:"GM",dialCode:"+220",name:"Gambia"},{code:"SN",dialCode:"+221",name:"Senegal"},{code:"MR",dialCode:"+222",name:"Mauritania"},{code:"ML",dialCode:"+223",name:"Mali"},{code:"GN",dialCode:"+224",name:"Guinea"},{code:"CI",dialCode:"+225",name:"Ivory Coast"},{code:"BF",dialCode:"+226",name:"Burkina Faso"},{code:"NE",dialCode:"+227",name:"Niger"},{code:"TG",dialCode:"+228",name:"Togo"},{code:"BJ",dialCode:"+229",name:"Benin"},{code:"MU",dialCode:"+230",name:"Mauritius"},{code:"LR",dialCode:"+231",name:"Liberia"},{code:"SL",dialCode:"+232",name:"Sierra Leone"},{code:"GH",dialCode:"+233",name:"Ghana"},{code:"NG",dialCode:"+234",name:"Nigeria"},{code:"TD",dialCode:"+235",name:"Chad"},{code:"CF",dialCode:"+236",name:"Central African Republic"},{code:"CM",dialCode:"+237",name:"Cameroon"},{code:"CV",dialCode:"+238",name:"Cape Verde"},{code:"ST",dialCode:"+239",name:"São Tomé and Príncipe"},{code:"GQ",dialCode:"+240",name:"Equatorial Guinea"},{code:"GA",dialCode:"+241",name:"Gabon"},{code:"CG",dialCode:"+242",name:"Congo"},{code:"CD",dialCode:"+243",name:"Congo (DRC)"},{code:"AO",dialCode:"+244",name:"Angola"},{code:"GW",dialCode:"+245",name:"Guinea-Bissau"},{code:"SC",dialCode:"+248",name:"Seychelles"},{code:"SD",dialCode:"+249",name:"Sudan"},{code:"RW",dialCode:"+250",name:"Rwanda"},{code:"ET",dialCode:"+251",name:"Ethiopia"},{code:"SO",dialCode:"+252",name:"Somalia"},{code:"DJ",dialCode:"+253",name:"Djibouti"},{code:"KE",dialCode:"+254",name:"Kenya"},{code:"TZ",dialCode:"+255",name:"Tanzania"},{code:"UG",dialCode:"+256",name:"Uganda"},{code:"BI",dialCode:"+257",name:"Burundi"},{code:"MZ",dialCode:"+258",name:"Mozambique"},{code:"ZM",dialCode:"+260",name:"Zambia"},{code:"MG",dialCode:"+261",name:"Madagascar"},{code:"RE",dialCode:"+262",name:"Réunion"},{code:"ZW",dialCode:"+263",name:"Zimbabwe"},{code:"NA",dialCode:"+264",name:"Namibia"},{code:"MW",dialCode:"+265",name:"Malawi"},{code:"LS",dialCode:"+266",name:"Lesotho"},{code:"BW",dialCode:"+267",name:"Botswana"},{code:"SZ",dialCode:"+268",name:"Eswatini"},{code:"KM",dialCode:"+269",name:"Comoros"},{code:"ER",dialCode:"+291",name:"Eritrea"},{code:"PT",dialCode:"+351",name:"Portugal"},{code:"LU",dialCode:"+352",name:"Luxembourg"},{code:"IE",dialCode:"+353",name:"Ireland"},{code:"IS",dialCode:"+354",name:"Iceland"},{code:"AL",dialCode:"+355",name:"Albania"},{code:"MT",dialCode:"+356",name:"Malta"},{code:"CY",dialCode:"+357",name:"Cyprus"},{code:"FI",dialCode:"+358",name:"Finland"},{code:"BG",dialCode:"+359",name:"Bulgaria"},{code:"LT",dialCode:"+370",name:"Lithuania"},{code:"LV",dialCode:"+371",name:"Latvia"},{code:"EE",dialCode:"+372",name:"Estonia"},{code:"MD",dialCode:"+373",name:"Moldova"},{code:"AM",dialCode:"+374",name:"Armenia"},{code:"BY",dialCode:"+375",name:"Belarus"},{code:"AD",dialCode:"+376",name:"Andorra"},{code:"MC",dialCode:"+377",name:"Monaco"},{code:"SM",dialCode:"+378",name:"San Marino"},{code:"UA",dialCode:"+380",name:"Ukraine"},{code:"RS",dialCode:"+381",name:"Serbia"},{code:"ME",dialCode:"+382",name:"Montenegro"},{code:"XK",dialCode:"+383",name:"Kosovo"},{code:"HR",dialCode:"+385",name:"Croatia"},{code:"SI",dialCode:"+386",name:"Slovenia"},{code:"BA",dialCode:"+387",name:"Bosnia and Herzegovina"},{code:"MK",dialCode:"+389",name:"North Macedonia"},{code:"CZ",dialCode:"+420",name:"Czech Republic"},{code:"SK",dialCode:"+421",name:"Slovakia"},{code:"LI",dialCode:"+423",name:"Liechtenstein"},{code:"FK",dialCode:"+500",name:"Falkland Islands"},{code:"BZ",dialCode:"+501",name:"Belize"},{code:"GT",dialCode:"+502",name:"Guatemala"},{code:"SV",dialCode:"+503",name:"El Salvador"},{code:"HN",dialCode:"+504",name:"Honduras"},{code:"NI",dialCode:"+505",name:"Nicaragua"},{code:"CR",dialCode:"+506",name:"Costa Rica"},{code:"PA",dialCode:"+507",name:"Panama"},{code:"HT",dialCode:"+509",name:"Haiti"},{code:"GP",dialCode:"+590",name:"Guadeloupe"},{code:"BO",dialCode:"+591",name:"Bolivia"},{code:"GY",dialCode:"+592",name:"Guyana"},{code:"EC",dialCode:"+593",name:"Ecuador"},{code:"GF",dialCode:"+594",name:"French Guiana"},{code:"PY",dialCode:"+595",name:"Paraguay"},{code:"MQ",dialCode:"+596",name:"Martinique"},{code:"SR",dialCode:"+597",name:"Suriname"},{code:"UY",dialCode:"+598",name:"Uruguay"},{code:"TL",dialCode:"+670",name:"Timor-Leste"},{code:"BN",dialCode:"+673",name:"Brunei"},{code:"NR",dialCode:"+674",name:"Nauru"},{code:"PG",dialCode:"+675",name:"Papua New Guinea"},{code:"TO",dialCode:"+676",name:"Tonga"},{code:"SB",dialCode:"+677",name:"Solomon Islands"},{code:"VU",dialCode:"+678",name:"Vanuatu"},{code:"FJ",dialCode:"+679",name:"Fiji"},{code:"PW",dialCode:"+680",name:"Palau"},{code:"WS",dialCode:"+685",name:"Samoa"},{code:"KI",dialCode:"+686",name:"Kiribati"},{code:"FM",dialCode:"+691",name:"Micronesia"},{code:"MH",dialCode:"+692",name:"Marshall Islands"},{code:"KP",dialCode:"+850",name:"North Korea"},{code:"HK",dialCode:"+852",name:"Hong Kong"},{code:"MO",dialCode:"+853",name:"Macau"},{code:"KH",dialCode:"+855",name:"Cambodia"},{code:"LA",dialCode:"+856",name:"Laos"},{code:"BD",dialCode:"+880",name:"Bangladesh"},{code:"TW",dialCode:"+886",name:"Taiwan"},{code:"MV",dialCode:"+960",name:"Maldives"},{code:"LB",dialCode:"+961",name:"Lebanon"},{code:"JO",dialCode:"+962",name:"Jordan"},{code:"SY",dialCode:"+963",name:"Syria"},{code:"IQ",dialCode:"+964",name:"Iraq"},{code:"KW",dialCode:"+965",name:"Kuwait"},{code:"SA",dialCode:"+966",name:"Saudi Arabia"},{code:"YE",dialCode:"+967",name:"Yemen"},{code:"OM",dialCode:"+968",name:"Oman"},{code:"PS",dialCode:"+970",name:"Palestine"},{code:"AE",dialCode:"+971",name:"United Arab Emirates"},{code:"IL",dialCode:"+972",name:"Israel"},{code:"BH",dialCode:"+973",name:"Bahrain"},{code:"QA",dialCode:"+974",name:"Qatar"},{code:"BT",dialCode:"+975",name:"Bhutan"},{code:"MN",dialCode:"+976",name:"Mongolia"},{code:"NP",dialCode:"+977",name:"Nepal"},{code:"TJ",dialCode:"+992",name:"Tajikistan"},{code:"TM",dialCode:"+993",name:"Turkmenistan"},{code:"AZ",dialCode:"+994",name:"Azerbaijan"},{code:"GE",dialCode:"+995",name:"Georgia"},{code:"KG",dialCode:"+996",name:"Kyrgyzstan"},{code:"UZ",dialCode:"+998",name:"Uzbekistan"}].map((e=>{return{...e,flag:(a=e.code,String.fromCodePoint(...a.toUpperCase().split("").map((e=>127397+e.charCodeAt(0)))))};var a}));function r(e){const a=e.toUpperCase();return n.find((e=>e.code===a))||n.find((e=>"US"===e.code))}const d=a(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.fieldChange=t(this,"fieldChange"),this.buttonClick=t(this,"buttonClick")}get host(){return this}component;value;disabled=!1;passwordVisible=!1;selectedCountry=r("US");localPhoneNumber="";countryDropdownOpen=!1;telEmailMode=!1;fieldChange;buttonClick;componentChanged(){this.initCountryFromConfig(),this.initTelValue()}valueChanged(){this.initTelValue()}componentWillLoad(){this.initCountryFromConfig(),this.initTelValue()}componentDidLoad(){if("CODE"===this.component?.type&&!this.disabled&&0===(this.getEffectiveValue()??"").length){const e=this.host.shadowRoot?.querySelector("input.code-input");e?.focus()}}initCountryFromConfig(){if("TEL"===this.component?.type){const e=this.component.config,a=e?.default_country;a&&(this.selectedCountry=r(a)),!0===e?.allow_email&&(this.telEmailMode=!0)}}initTelValue(){if("TEL"!==this.component?.type)return;const e=this.component.config,a=!0===e?.allow_email,o=this.getEffectiveValue();if(!o)return this.localPhoneNumber="",void(a&&(this.telEmailMode=!0));if(o.startsWith("+")){const e=[...n].sort(((e,a)=>a.dialCode.length-e.dialCode.length));for(const t of e)if(o.startsWith(t.dialCode))return this.selectedCountry=t,this.localPhoneNumber=o.slice(t.dialCode.length),void(a&&(this.telEmailMode=!1))}if(this.localPhoneNumber=o,a){const e=/^[+\d]/.test(o);this.telEmailMode=!e}}handleCountryChange=e=>{this.selectedCountry=r(e.target.value),this.fieldChange.emit({id:this.component.id,value:this.localPhoneNumber?`${this.selectedCountry.dialCode}${this.localPhoneNumber}`:""})};detectDialCodeFromInput(e){const a=e.startsWith("00")?"+"+e.slice(2):e;if(!a.startsWith("+"))return null;const o=[...n].sort(((e,a)=>a.dialCode.length-e.dialCode.length));for(const e of o)if(a.startsWith(e.dialCode))return this.selectedCountry=e,a.slice(e.dialCode.length);return null}processPhoneInput(e,a,o){const t=this.detectDialCodeFromInput(a);if(null!==t){const a=o?t.replace(/[^+\d\s\-()]/g,"").replace(/\+/g,""):t.replace(/[^\d\s\-()]/g,"");e.value=a,this.localPhoneNumber=a,this.fieldChange.emit({id:this.component.id,value:`${this.selectedCountry.dialCode}${a}`})}else{const t=o?a.replace(/[^+\d\s\-()]/g,"").replace(/\+/g,""):a.replace(/[^\d\s\-()]/g,"");t!==a&&(e.value=t),this.localPhoneNumber=t,this.fieldChange.emit({id:this.component.id,value:t?`${this.selectedCountry.dialCode}${t}`:""})}}handlePhoneInput=e=>{const a=e.target,o=a.value,t=this.component.config;if(!0===t?.allow_email){const e=o.length>0&&/^[+\d]/.test(o)&&!o.includes("@");return this.telEmailMode=!e,void(this.telEmailMode?(this.localPhoneNumber=o,this.fieldChange.emit({id:this.component.id,value:o})):this.processPhoneInput(a,o,!0))}this.processPhoneInput(a,o,!1)};handleInput=e=>{this.fieldChange.emit({id:this.component.id,value:e.target.value})};handleKeyDown=e=>{if("Enter"===e.key&&(e.preventDefault(),this.buttonClick.emit({id:"submit",type:"submit",value:"next"})),"Backspace"===e.key&&!this.telEmailMode){const a=e.target,o=this.component.config;!0===o?.allow_email&&0===a.value.length&&(this.telEmailMode=!0,this.localPhoneNumber="",this.fieldChange.emit({id:this.component.id,value:""}))}};handleCodeInput=(e,a,o,t)=>{const i=e.target,n=i.value.replace("alphanumeric"===o?/[^a-zA-Z0-9]/g:/\D/g,"").slice(0,a);n!==i.value&&(i.value=n),this.fieldChange.emit({id:this.component.id,value:n}),t&&n.length===a&&this.buttonClick.emit({id:"submit",type:"submit",value:"next"})};handleCheckbox=e=>{this.fieldChange.emit({id:this.component.id,value:e.target.checked?"true":"false"})};getEffectiveValue(){if(null!=this.value)return this.value;const e=this.component;if(e.config&&"default_value"in e.config){const a=e.config.default_value;if("string"==typeof a&&""!==a)return a}}sanitizeForCssToken(e){return e.toLowerCase().replace(/[^a-z0-9-]/g,"-").replace(/-+/g,"-").replace(/^-|-$/g,"")}handleButtonClick=(e,a,o)=>{e.preventDefault(),this.buttonClick.emit({id:this.component.id,type:a,value:o})};togglePasswordVisibility=()=>{this.passwordVisible=!this.passwordVisible};getErrors(){const e=this.component;return e.messages?.filter((e=>"error"===e.type))||[]}renderFloatingLabel(e,a,o,t){return e?i("label",{class:t?"input-label floating":"input-label",part:"label",htmlFor:a},e,o&&i("span",{class:"required"},"*")):null}renderLabel(e,a,o){return e?i("label",{class:"input-label",part:"label",htmlFor:a},e,o&&i("span",{class:"required"},"*")):null}getInputFieldClass(e){return e?"input-field has-error":"input-field"}renderPasswordToggle(){return this.passwordVisible?i("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},i("path",{d:"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"}),i("line",{x1:"1",y1:"1",x2:"23",y2:"23"})):i("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},i("path",{d:"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"}),i("circle",{cx:"12",cy:"12",r:"3"}))}renderErrors(){return this.getErrors().map((e=>i("span",{class:"error-text",part:"error-text",key:e.id??e.text},e.text)))}renderHint(e){return e?i("span",{class:"helper-text",part:"helper-text"},e):null}renderDivider(){return i("hr",{class:"divider",part:"divider"})}renderHtml(e){return i("div",{class:"html-content",part:"html-content",innerHTML:e.config?.content??""})}renderImage(e){const{src:a,alt:o,width:t,height:n}=e.config??{};return a?i("img",{class:"image",part:"image",src:a,alt:o??"",width:t,height:n,loading:"lazy"}):null}renderRichText(e){return i("div",{class:"rich-text",part:"rich-text",innerHTML:e.config?.content??""})}renderNextButton(e){return i("button",{type:"submit",class:"btn btn-primary",part:"button button-primary","data-primary-action-button":!0,disabled:this.disabled,onClick:e=>this.handleButtonClick(e,"submit","next")},e.config.text??"Continue")}renderPreviousButton(e){return i("button",{type:"button",class:"btn btn-secondary",part:"button button-secondary",disabled:this.disabled,onClick:e=>this.handleButtonClick(e,"previous","back")},e.config.text??"Back")}renderJumpButton(e){return i("button",{type:"button",class:"btn btn-link",part:"button button-link",disabled:this.disabled,onClick:a=>this.handleButtonClick(a,"jump",e.config.target_step)},e.config.text??"Go")}renderResendButton(e){return i("button",{type:"button",class:"btn btn-link",part:"button button-link",disabled:this.disabled,onClick:a=>this.handleButtonClick(a,"resend",e.config.resend_action)},e.config.text??"Resend")}renderTextField(e){const a=`input-${e.id}`,o=this.getErrors(),{multiline:t,max_length:n,autocomplete:r}=e.config??{},d=this.getEffectiveValue(),l=!!(d&&d.length>0);return t?i("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(e.label,a,e.required),i("textarea",{id:a,class:this.getInputFieldClass(o.length>0),part:"input textarea",name:e.id,placeholder:" ",required:e.required,disabled:this.disabled,maxLength:n,onInput:this.handleInput},d??""),this.renderErrors(),0===o.length&&this.renderHint(e.hint)):i("div",{class:"input-wrapper",part:"input-wrapper"},i("div",{class:"input-container"},i("input",{id:a,class:this.getInputFieldClass(o.length>0),part:"input",type:e.sensitive?"password":"text",name:e.id,"data-input-name":e.id,value:d??"",placeholder:" ",required:e.required,disabled:this.disabled,maxLength:n,autoComplete:r,onInput:this.handleInput,onKeyDown:this.handleKeyDown}),this.renderFloatingLabel(e.label,a,e.required,l)),this.renderErrors(),0===o.length&&this.renderHint(e.hint))}renderCodeField(e){const a=`input-${e.id}`,o=this.getErrors(),t=o.length>0,n=e.config??{},r=n.length??6,d=n.mode??"numeric",l=!1!==n.auto_submit,s=n.group_size??3,c=n.separator??"-",p=n.placeholder,h="alphanumeric"===d?/[^a-zA-Z0-9]/g:/\D/g,u=(this.getEffectiveValue()??"").replace(h,"").slice(0,r),m=e=>{let a="code-box";return e<u.length&&(a+=" is-filled"),this.disabled||e!==u.length||(a+=" is-active"),a},b=[];if(s>0&&s<r)for(let e=0;e<r;e+=s)b.push(Array.from({length:Math.min(s,r-e)},((a,o)=>e+o)));else b.push(Array.from({length:r},((e,a)=>a)));return i("div",{class:"input-wrapper",part:"input-wrapper"},i("div",{class:t?"code-field has-error":"code-field",part:"code-field"},i("input",{id:a,class:"code-input",part:"input code-input",type:"text",name:e.id,"data-input-name":e.id,value:u,inputMode:"numeric"===d?"numeric":"text",autoComplete:"one-time-code",autoCapitalize:"off",autoCorrect:"off",spellcheck:!1,maxLength:r,required:e.required,disabled:this.disabled,"aria-label":e.label,"aria-invalid":t?"true":"false",onInput:e=>this.handleCodeInput(e,r,d,l),onKeyDown:this.handleKeyDown}),i("div",{class:"code-boxes",part:"code-boxes","aria-hidden":"true"},b.map(((e,a)=>[a>0&&c?i("span",{class:"code-separator",part:"code-separator"},c):null,i("div",{class:"code-group",part:"code-group"},e.map((e=>(e=>i("div",{class:m(e),part:"code-box"},u[e]??(p?i("span",{class:"code-box-placeholder"},p):"")))(e))))])))),this.renderErrors(),0===o.length&&this.renderHint(e.hint))}renderEmailField(e){const a=`input-${e.id}`,o=this.getErrors(),t=this.getEffectiveValue(),n=!!(t&&t.length>0),{autocomplete:r}=e.config??{};return i("div",{class:"input-wrapper",part:"input-wrapper"},i("div",{class:"input-container"},i("input",{id:a,class:this.getInputFieldClass(o.length>0),part:"input",type:"email",name:e.id,"data-input-name":e.id,value:t??"",placeholder:" ",required:e.required,disabled:this.disabled,autocomplete:r||"email",onInput:this.handleInput,onKeyDown:this.handleKeyDown}),this.renderFloatingLabel(e.label,a,e.required,n)),this.renderErrors(),0===o.length&&this.renderHint(e.hint))}renderPasswordField(e){const a=`input-${e.id}`,o=this.getErrors(),t=this.getEffectiveValue(),n=!!(t&&t.length>0),r=e.config?.forgot_password_link;return i("div",{class:"input-wrapper",part:"input-wrapper"},i("div",{class:"input-container password-container"},i("input",{id:a,class:this.getInputFieldClass(o.length>0),part:"input",type:this.passwordVisible?"text":"password",name:e.id,"data-input-name":e.id,value:t??"",placeholder:" ",required:e.required,disabled:this.disabled,minLength:e.config?.min_length,autocomplete:"current-password",onInput:this.handleInput,onKeyDown:this.handleKeyDown}),this.renderFloatingLabel(e.label,a,e.required,n),i("button",{type:"button",class:"password-toggle",part:"password-toggle",onClick:this.togglePasswordVisibility,"aria-label":"Toggle password visibility","aria-pressed":this.passwordVisible?"true":"false"},this.renderPasswordToggle())),this.renderErrors(),0===o.length&&this.renderHint(e.hint),r&&i("div",{class:"field-link",part:"field-link"},i("a",{href:r,class:"link",part:"link"},"Forgot password?")))}renderNumberField(e){const a=`input-${e.id}`,o=this.getErrors(),{placeholder:t,min:n,max:r,step:d}=e.config??{},l=this.getEffectiveValue();return i("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(e.label,a,e.required),i("input",{id:a,class:this.getInputFieldClass(o.length>0),part:"input",type:"number",name:e.id,value:l??"",placeholder:t,required:e.required,disabled:this.disabled,min:n,max:r,step:d,onInput:this.handleInput,onKeyDown:this.handleKeyDown}),this.renderErrors(),0===o.length&&this.renderHint(e.hint))}renderTelField(e){const a=`input-${e.id}`,o=this.getErrors(),t=e.config,r=!0===t?.allow_email,d=this.localPhoneNumber.length>0,l=!r||!this.telEmailMode,s=l?i("select",{class:"country-select",part:"country-select",style:{width:`${`${this.selectedCountry.flag} ${this.selectedCountry.dialCode}`.length+1}ch`,minWidth:"0"},onChange:this.handleCountryChange,disabled:this.disabled,"aria-label":"Country code"},n.map((e=>i("option",{value:e.code,selected:this.selectedCountry.code===e.code,key:e.code},`${e.flag} ${e.dialCode}`)))):null,c=r&&this.telEmailMode?"text":"tel";return i("div",{class:"input-wrapper",part:"input-wrapper"},i("div",{class:l?"phone-input-wrapper":"",part:"phone-input-wrapper"},s,i("div",{class:"input-container"},i("input",{id:a,class:this.getInputFieldClass(o.length>0),part:"input",type:c,name:e.id,"data-input-name":e.id,value:this.localPhoneNumber,placeholder:" ",required:e.required,disabled:this.disabled,autocomplete:r&&this.telEmailMode?"email":"tel-national",onInput:this.handlePhoneInput,onKeyDown:this.handleKeyDown}),this.renderFloatingLabel(e.label,a,e.required,d))),this.renderErrors(),0===o.length&&this.renderHint(e.hint))}renderUrlField(e){const a=`input-${e.id}`,o=this.getErrors(),t=this.getEffectiveValue();return i("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(e.label,a,e.required),i("input",{id:a,class:this.getInputFieldClass(o.length>0),part:"input",type:"url",name:e.id,value:t??"",placeholder:e.config?.placeholder,required:e.required,disabled:this.disabled,onInput:this.handleInput,onKeyDown:this.handleKeyDown}),this.renderErrors(),0===o.length&&this.renderHint(e.hint))}renderDateField(e){const a=`input-${e.id}`,o=this.getErrors(),{min:t,max:n}=e.config??{},r=this.getEffectiveValue();return i("div",{class:"input-wrapper",part:"input-wrapper"},i("div",{class:"input-container"},i("input",{id:a,class:this.getInputFieldClass(o.length>0),part:"input",type:"date",name:e.id,"data-input-name":e.id,value:r??"",placeholder:" ",required:e.required,disabled:this.disabled,min:t,max:n,onInput:this.handleInput,onKeyDown:this.handleKeyDown}),this.renderFloatingLabel(e.label,a,e.required,!0)),this.renderErrors(),0===o.length&&this.renderHint(e.hint))}renderBooleanField(e){return i("label",{class:"checkbox-wrapper",part:"checkbox-wrapper"},i("input",{type:"checkbox",part:"checkbox",name:e.id,checked:"true"===this.value||!0===e.config?.default_value,required:e.required,disabled:this.disabled,onChange:this.handleCheckbox}),i("span",{class:"checkbox-label",part:"checkbox-label"},e.label))}renderLegalField(e){const a=e.config?.text??e.label??"",o=!0===e.config?.html;return i("label",{class:"checkbox-wrapper",part:"checkbox-wrapper"},i("input",{type:"checkbox",part:"checkbox",name:e.id,checked:"true"===this.value,required:e.required,disabled:this.disabled,onChange:this.handleCheckbox}),o?i("span",{class:"checkbox-label",part:"checkbox-label",innerHTML:a}):i("span",{class:"checkbox-label",part:"checkbox-label"},a))}renderCountryField(e){const a=`input-${e.id}`,o=this.getErrors(),{placeholder:t}=e.config??{},r=this.getEffectiveValue();return i("div",{class:"input-wrapper",part:"input-wrapper"},i("div",{class:"input-container"},i("select",{id:a,class:this.getInputFieldClass(o.length>0),part:"input select",name:e.id,required:e.required,disabled:this.disabled,onChange:this.handleInput},t&&i("option",{value:"",disabled:!0,selected:!r},t),n.map((e=>i("option",{value:e.code,selected:r===e.code,key:e.code},e.flag," ",e.name)))),this.renderFloatingLabel(e.label,a,e.required,!0)),this.renderErrors(),0===o.length&&this.renderHint(e.hint))}renderDropdownField(e){const a=`input-${e.id}`,o=this.getErrors(),{options:t,placeholder:n}=e.config??{},r=this.getEffectiveValue();return i("div",{class:"input-wrapper",part:"input-wrapper"},i("div",{class:"input-container"},i("select",{id:a,class:this.getInputFieldClass(o.length>0),part:"input select",name:e.id,required:e.required,disabled:this.disabled,onChange:this.handleInput},n&&i("option",{value:"",disabled:!0,selected:!r},n),t?.map((e=>i("option",{value:e.value,selected:r===e.value,key:e.value},e.label)))),this.renderFloatingLabel(e.label,a,e.required,!0)),this.renderErrors(),0===o.length&&this.renderHint(e.hint))}renderChoiceField(e){const a=this.getErrors(),{options:o,display:t}=e.config??{},n="checkbox"===t,r=n?"checkbox":"radio";return i("div",{class:"choice-wrapper",part:"choice-wrapper"},e.label&&i("span",{class:"choice-label",part:"choice-label"},e.label,e.required&&i("span",{class:"required"},"*")),i("div",{class:"choice-options",part:"choice-options"},o?.map((a=>i("label",{class:"choice-option",part:"choice-option",key:a.value},i("input",{type:r,part:r,name:e.id,value:a.value,checked:this.getEffectiveValue()===a.value,required:e.required&&!n,disabled:this.disabled,onChange:this.handleInput}),i("span",null,a.label))))),this.renderErrors(),0===a.length&&this.renderHint(e.hint))}renderSocialField(e){const a=e.config?.providers??[],o=e.config?.provider_details,t=new Map(o?.map((e=>[e.name,e]))??[]),n=e=>{const a=t.get(e);return a?.display_name?a.display_name:e.split("-").map((e=>e.charAt(0).toUpperCase()+e.slice(1))).join(" ")},r=e=>{const a=t.get(e),o=this.sanitizeForCssToken(e);return a?.icon_url?i("img",{class:"social-icon",part:`social-icon social-icon-${o}`,src:a.icon_url,alt:a.display_name||e}):null};return i("div",{class:"social-buttons",part:"social-buttons"},a.map((e=>{const a=this.sanitizeForCssToken(e),o=(e=>{const a=t.get(e);return a?.strategy??e})(e),d=r(e),l=t.get(e),s=`btn btn-secondary btn-social btn-social-${a}${d?"":" no-icon"}`,c=`button button-secondary button-social button-social-${a}`,p=[d,i("span",{class:"btn-social-content",part:`button-social-content button-social-content-${a}`},i("span",{part:`button-social-text button-social-text-${a}`},n(e)),i("span",{class:"btn-social-subtitle",part:`button-social-subtitle button-social-subtitle-${a}`}))];return l?.href?i("a",{href:this.disabled?void 0:l.href,class:s,part:c,"data-connection-name":e,"data-strategy":o,key:e,"aria-disabled":this.disabled?"true":void 0,tabindex:this.disabled?-1:void 0,onClick:e=>{this.disabled&&e.preventDefault()}},p):i("button",{type:"button",class:s,part:c,"data-connection-name":e,"data-strategy":o,disabled:this.disabled,onClick:a=>this.handleButtonClick(a,"SOCIAL",e),key:e},p)})))}render(){if(!this.component)return null;if(!1===this.component.visible)return null;switch(this.component.type){case"DIVIDER":return this.renderDivider();case"HTML":return this.renderHtml(this.component);case"IMAGE":return this.renderImage(this.component);case"RICH_TEXT":return this.renderRichText(this.component);case"NEXT_BUTTON":return this.renderNextButton(this.component);case"PREVIOUS_BUTTON":return this.renderPreviousButton(this.component);case"JUMP_BUTTON":return this.renderJumpButton(this.component);case"RESEND_BUTTON":return this.renderResendButton(this.component);case"TEXT":return this.renderTextField(this.component);case"EMAIL":return this.renderEmailField(this.component);case"CODE":return this.renderCodeField(this.component);case"PASSWORD":return this.renderPasswordField(this.component);case"NUMBER":return this.renderNumberField(this.component);case"TEL":return this.renderTelField(this.component);case"URL":return this.renderUrlField(this.component);case"DATE":return this.renderDateField(this.component);case"BOOLEAN":return this.renderBooleanField(this.component);case"LEGAL":return this.renderLegalField(this.component);case"COUNTRY":return this.renderCountryField(this.component);case"DROPDOWN":return this.renderDropdownField(this.component);case"CHOICE":return this.renderChoiceField(this.component);case"SOCIAL":return this.renderSocialField(this.component);case"AUTH0_VERIFIABLE_CREDENTIALS":case"GMAPS_ADDRESS":case"RECAPTCHA":return console.warn(`Widget component "${this.component.type}" not yet implemented`),null;case"CARDS":case"CUSTOM":case"FILE":case"PAYMENT":return console.warn(`Component "${this.component.type}" not yet implemented`),null;default:return console.warn(`Unknown component type: ${this.component.type}`),null}}static get watchers(){return{component:[{componentChanged:0}],value:[{valueChanged:0}]}}static get style(){return":host{display:block}.input-wrapper{display:flex;flex-direction:column;position:relative;margin-top:8px;margin-bottom:16px}.input-container{position:relative;width:100%}.input-label{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:var(--ah-font-size-label, 16px);font-weight:var(--ah-font-weight-label, 400);color:var(--ah-color-text-muted, #65676e);pointer-events:none;transition:all 0.15s ease-out;background-color:transparent;padding:0;z-index:1}.input-label.floating,.input-field:focus+.input-label,.input-field:not(:placeholder-shown)+.input-label,select.input-field+.input-label,input[type=\"date\"].input-field+.input-label{top:-8px;transform:translateY(0);font-size:12px;background-color:var(--ah-color-bg, #ffffff);padding:0 4px;left:12px;color:var(--ah-color-text-muted, #65676e)}.input-field:focus+.input-label{color:var(--ah-color-primary, #635dff)}.required{color:var(--ah-color-error, #d03c38);margin-left:2px}.input-field{width:100%;padding:16px;font-size:16px;font-family:inherit;color:var(--ah-color-input-text, var(--ah-color-text, #1e212a));background-color:var(--ah-color-input-bg, #ffffff);border:var(--ah-input-border-width, 1px) solid var(--ah-color-border, #c9cace);border-radius:var(--ah-input-radius, 3px);outline:none;transition:border-color 0.15s ease-out, box-shadow 0.15s ease-out;box-sizing:border-box}.input-field::placeholder{color:transparent}.input-field:hover{border-color:var(--ah-color-border-hover, #65676e)}.input-field:focus{border-color:var(--ah-color-primary, #635dff);box-shadow:inset 0 0 0 1px var(--ah-color-primary, #635dff)}.input-field.has-error{border-color:var(--ah-color-error, #d03c38)}.input-field.has-error:focus{box-shadow:inset 0 0 0 1px var(--ah-color-error, #d03c38)}.input-field:disabled{background-color:var(--ah-color-bg-disabled, #f5f5f5);border-color:var(--ah-color-border-disabled, #e0e1e3);cursor:not-allowed;opacity:0.7}.password-container{position:relative;display:flex;align-items:center}.password-container .input-field{padding-right:48px}.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--ah-color-icon, var(--ah-color-text-muted, #65676e));transition:color 0.15s ease}.password-toggle:hover{color:var(--ah-color-icon, var(--ah-color-text, #1e212a))}.password-toggle svg{width:20px;height:20px}.error-text{font-size:12px;color:var(--ah-color-error, #d03c38);margin-top:4px;line-height:1.4}.helper-text{font-size:12px;color:var(--ah-color-text-muted, #65676e);margin-top:4px;line-height:1.4}.field-link{display:block;text-align:left;margin-top:8px;margin-bottom:16px}.field-link a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:var(--ah-font-size-link, 14px);font-weight:var(--ah-font-weight-link, 400)}.field-link a:hover{text-decoration:underline}.checkbox-wrapper{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin-bottom:16px}.checkbox-wrapper input[type=\"checkbox\"]{width:18px;height:18px;margin:0;accent-color:var(--ah-color-primary, #635dff);cursor:pointer;flex-shrink:0}.checkbox-label{font-size:var(--ah-font-size-body, 14px);font-weight:var(--ah-font-weight-body, 400);color:var(--ah-color-text, #1e212a);line-height:1.5}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 20px;font-size:var(--ah-font-size-btn, 16px);font-weight:var(--ah-font-weight-btn, 400);font-family:inherit;line-height:1.25;text-align:center;text-decoration:none;border:none;border-radius:var(--ah-btn-radius, 3px);cursor:pointer;transition:background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;box-sizing:border-box}.btn:disabled{opacity:0.6;cursor:not-allowed}.btn:not(:disabled):active{transform:scale(0.98)}.btn:focus-visible{outline:2px solid var(--ah-color-focus-ring, var(--ah-color-primary, #635dff));outline-offset:2px}.btn-primary{background-color:var(--ah-color-primary, #635dff);color:var(--ah-color-text-on-primary, #ffffff);margin-top:12px}.btn-primary:not(:disabled):hover{background-color:var(--ah-color-primary-hover, color-mix(in srgb, var(--ah-color-primary, #635dff) 85%, black))}.btn-secondary{background-color:var(--ah-color-bg, #ffffff);color:var(--ah-btn-secondary-text, var(--ah-color-text, #1e212a));border:var(--ah-btn-border-width, 1px) solid var(--ah-btn-secondary-border, var(--ah-color-border, #c9cace))}.btn-secondary:not(:disabled):hover{background-color:var(--ah-color-bg-hover, #f5f5f5);border-color:var(--ah-color-border-hover, #65676e)}.btn-link{background:none;border:none;color:var(--ah-color-link, #635dff);padding:8px 0;font-weight:var(--ah-font-weight-link, 400);text-decoration:none}.btn-link:hover{text-decoration:underline}.phone-input-wrapper{display:flex;align-items:stretch;gap:0;width:100%}.country-select{flex-shrink:0;width:auto;padding:12px 8px;font-size:var(--ah-font-size-body, 16px);font-family:var(--ah-font-family, inherit);border:var(--ah-input-border-width, 1px) solid var(--ah-color-border, #c9cace);border-right:none;border-radius:var(--ah-input-radius, 4px) 0 0 var(--ah-input-radius, 4px);background-color:var(--ah-color-input-bg, var(--ah-color-surface, #fff));color:var(--ah-color-input-text, var(--ah-color-text, #1e212a));cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 6px center;padding-right:22px}.country-select:focus{outline:none;border-color:var(--ah-color-primary, #635dff);box-shadow:0 0 0 1px var(--ah-color-primary, #635dff)}.country-select:disabled{opacity:0.5;cursor:not-allowed}.phone-input-wrapper .input-container{flex:1;min-width:0}.phone-input-wrapper .input-field{border-radius:0 var(--ah-input-radius, 4px) var(--ah-input-radius, 4px) 0}.phone-input-wrapper .input-label.floating,.phone-input-wrapper .input-field:focus+.input-label,.phone-input-wrapper .input-field:not(:placeholder-shown)+.input-label{left:8px}.social-buttons{display:flex;flex-direction:column;gap:12px}.btn-social{display:flex;align-items:center;justify-content:center;gap:12px}.btn-social-content{display:flex;flex-direction:column;align-items:center;text-align:center}.btn-social-subtitle{font-size:12px;font-style:italic;opacity:0.8;margin-top:2px}.btn-social-subtitle:empty{display:none}.social-icon{width:20px;height:20px;flex-shrink:0}@media (max-width: 480px){.social-buttons:has(.btn-social:nth-child(3)){flex-direction:row;flex-wrap:nowrap;justify-content:stretch;gap:8px}.social-buttons:has(.btn-social:nth-child(3)) .btn-social{width:auto;min-width:0;padding:12px;flex:1 1 0}.social-buttons:has(.btn-social:nth-child(3)) .btn-social span{display:none}.social-buttons:has(.btn-social:nth-child(3)) .social-icon{width:24px;height:24px}}.btn-icon{width:20px;height:20px;flex-shrink:0}.btn-icon img{width:100%;height:100%;object-fit:contain}.text-title{font-size:var(--ah-font-size-title, 20px);font-weight:var(--ah-font-weight-title, 400);color:var(--ah-color-text-header, var(--ah-color-header, #1e212a));margin:8px 0;line-height:1.3}.text-title.text-success{color:var(--ah-color-success, #13a769)}.text-description{font-size:var(--ah-font-size-subtitle, 14px);font-weight:var(--ah-font-weight-subtitle, 400);color:var(--ah-color-text-muted, #65676e);margin:4px 0;line-height:1.5}.image{display:block;max-width:100%;height:auto;border-radius:4px}.image-centered{margin:0 auto 16px;width:52px;height:52px;object-fit:contain}.link{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:var(--ah-font-size-link, 14px);transition:color 0.15s ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid var(--ah-color-focus-ring, var(--ah-color-link, #635dff));outline-offset:2px;border-radius:2px}.node-error{padding:12px 16px;background-color:var(--ah-color-error-bg, #ffeaea);color:var(--ah-color-error, #d03c38);border-left:3px solid var(--ah-color-error, #d03c38);border-radius:0;font-size:14px;margin-bottom:16px}.node-success{padding:12px 16px;background-color:var(--ah-color-success-bg, #e6f9f1);color:var(--ah-color-success, #13a769);border-left:3px solid var(--ah-color-success, #13a769);border-radius:0;font-size:14px;margin-bottom:16px}.divider{display:flex;align-items:center;text-align:center;margin:16px 0}.divider::before,.divider::after{content:\"\";flex:1;border-bottom:1px solid var(--ah-color-border-muted, #c9cace)}.divider-text{padding:0 10px;font-size:12px;font-weight:400;color:var(--ah-color-text-muted, #65676e);text-transform:uppercase;letter-spacing:0.5px}.rich-text{font-size:var(--ah-font-size-body, 14px);font-weight:var(--ah-font-weight-body, 400);line-height:1.5;color:var(--ah-color-text, #1e212a)}.rich-text a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);transition:color 0.15s ease}.rich-text a:hover{text-decoration:underline}.rich-text .terms-text{margin-top:16px;text-align:center;font-size:12px;color:var(--ah-color-text-muted, #65676e)}.rich-text .terms-text a{font-size:12px}.rich-text .forgot-password-link{text-align:right;font-size:13px;margin-top:4px}.rich-text .forgot-password-link a{font-size:13px;color:var(--ah-color-link, #635dff)}.rich-text .passwordless-link{margin-top:16px;text-align:center;font-size:14px}.rich-text .passwordless-link a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none)}.rich-text .passwordless-link a:hover{text-decoration:underline}.rich-text .signup-link{margin-top:16px;text-align:center;font-size:14px;color:var(--ah-color-text, #1e212a)}.code-field{position:relative}.code-input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:none;background:transparent;color:transparent;caret-color:transparent;font-family:inherit;letter-spacing:0;outline:none;cursor:text;-webkit-text-fill-color:transparent}.code-boxes{display:flex;align-items:center;gap:var(--ah-code-group-gap, 12px);justify-content:center}.code-group{display:flex;gap:0}.code-separator{color:var(--ah-color-text-muted, #65676e);font-size:var(--ah-code-font-size, 24px);user-select:none}.code-box-placeholder{color:var(--ah-color-text-muted, #65676e);opacity:0.4}.code-box{position:relative;flex:0 0 auto;width:var(--ah-code-box-width, 48px);height:var(--ah-code-box-height, 56px);display:flex;align-items:center;justify-content:center;font-size:var(--ah-code-font-size, 24px);font-family:inherit;color:var(--ah-color-input-text, var(--ah-color-text, #1e212a));background-color:var(--ah-color-input-bg, #ffffff);border:var(--ah-input-border-width, 1px) solid var(--ah-color-border, #c9cace);border-radius:0;transition:border-color 0.15s ease-out, box-shadow 0.15s ease-out;box-sizing:border-box}.code-box+.code-box{margin-left:calc(-1 * var(--ah-input-border-width, 1px))}.code-group .code-box:first-child{border-top-left-radius:var(--ah-input-radius, 3px);border-bottom-left-radius:var(--ah-input-radius, 3px)}.code-group .code-box:last-child{border-top-right-radius:var(--ah-input-radius, 3px);border-bottom-right-radius:var(--ah-input-radius, 3px)}.code-field:focus-within .code-box.is-active{z-index:1;border-color:var(--ah-color-primary, #635dff);box-shadow:inset 0 0 0 1px var(--ah-color-primary, #635dff)}.code-field.has-error .code-box{border-color:var(--ah-color-error, #d03c38)}.code-input:disabled{cursor:not-allowed}.code-input:disabled~.code-boxes .code-box{background-color:var(--ah-color-bg-disabled, #f5f5f5);border-color:var(--ah-color-border-disabled, #e0e1e3)}"}},[513,"authhero-node",{component:[16],value:[1],disabled:[4],passwordVisible:[32],selectedCountry:[32],localPhoneNumber:[32],countryDropdownOpen:[32],telEmailMode:[32]},void 0,{component:[{componentChanged:0}],value:[{valueChanged:0}]}]);function l(){"undefined"!=typeof customElements&&["authhero-node"].forEach((a=>{"authhero-node"===a&&(customElements.get(e(a))||customElements.define(e(a),d))}))}l();export{d as A,l as d}
@@ -1,4 +1,4 @@
1
- import { r as registerInstance, c as createEvent, h } from './index-FUW5zvoZ.js';
1
+ import { r as registerInstance, c as createEvent, g as getElement, h } from './index-FUW5zvoZ.js';
2
2
 
3
3
  /**
4
4
  * Country data for phone number input with country code selector.
@@ -236,7 +236,7 @@ function getCountryByCode(code) {
236
236
  countries.find((c) => c.code === "US"));
237
237
  }
238
238
 
239
- const authheroNodeCss = () => `:host{display:block}.input-wrapper{display:flex;flex-direction:column;position:relative;margin-top:8px;margin-bottom:16px}.input-container{position:relative;width:100%}.input-label{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:var(--ah-font-size-label, 16px);font-weight:var(--ah-font-weight-label, 400);color:var(--ah-color-text-muted, #65676e);pointer-events:none;transition:all 0.15s ease-out;background-color:transparent;padding:0;z-index:1}.input-label.floating,.input-field:focus+.input-label,.input-field:not(:placeholder-shown)+.input-label,select.input-field+.input-label,input[type="date"].input-field+.input-label{top:-8px;transform:translateY(0);font-size:12px;background-color:var(--ah-color-bg, #ffffff);padding:0 4px;left:12px;color:var(--ah-color-text-muted, #65676e)}.input-field:focus+.input-label{color:var(--ah-color-primary, #635dff)}.required{color:var(--ah-color-error, #d03c38);margin-left:2px}.input-field{width:100%;padding:16px;font-size:16px;font-family:inherit;color:var(--ah-color-input-text, var(--ah-color-text, #1e212a));background-color:var(--ah-color-input-bg, #ffffff);border:var(--ah-input-border-width, 1px) solid var(--ah-color-border, #c9cace);border-radius:var(--ah-input-radius, 3px);outline:none;transition:border-color 0.15s ease-out, box-shadow 0.15s ease-out;box-sizing:border-box}.input-field::placeholder{color:transparent}.input-field:hover{border-color:var(--ah-color-border-hover, #65676e)}.input-field:focus{border-color:var(--ah-color-primary, #635dff);box-shadow:inset 0 0 0 1px var(--ah-color-primary, #635dff)}.input-field.has-error{border-color:var(--ah-color-error, #d03c38)}.input-field.has-error:focus{box-shadow:inset 0 0 0 1px var(--ah-color-error, #d03c38)}.input-field:disabled{background-color:var(--ah-color-bg-disabled, #f5f5f5);border-color:var(--ah-color-border-disabled, #e0e1e3);cursor:not-allowed;opacity:0.7}.password-container{position:relative;display:flex;align-items:center}.password-container .input-field{padding-right:48px}.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--ah-color-icon, var(--ah-color-text-muted, #65676e));transition:color 0.15s ease}.password-toggle:hover{color:var(--ah-color-icon, var(--ah-color-text, #1e212a))}.password-toggle svg{width:20px;height:20px}.error-text{font-size:12px;color:var(--ah-color-error, #d03c38);margin-top:4px;line-height:1.4}.helper-text{font-size:12px;color:var(--ah-color-text-muted, #65676e);margin-top:4px;line-height:1.4}.field-link{display:block;text-align:left;margin-top:8px;margin-bottom:16px}.field-link a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:var(--ah-font-size-link, 14px);font-weight:var(--ah-font-weight-link, 400)}.field-link a:hover{text-decoration:underline}.checkbox-wrapper{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin-bottom:16px}.checkbox-wrapper input[type="checkbox"]{width:18px;height:18px;margin:0;accent-color:var(--ah-color-primary, #635dff);cursor:pointer;flex-shrink:0}.checkbox-label{font-size:var(--ah-font-size-body, 14px);font-weight:var(--ah-font-weight-body, 400);color:var(--ah-color-text, #1e212a);line-height:1.5}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 20px;font-size:var(--ah-font-size-btn, 16px);font-weight:var(--ah-font-weight-btn, 400);font-family:inherit;line-height:1.25;text-align:center;text-decoration:none;border:none;border-radius:var(--ah-btn-radius, 3px);cursor:pointer;transition:background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;box-sizing:border-box}.btn:disabled{opacity:0.6;cursor:not-allowed}.btn:not(:disabled):active{transform:scale(0.98)}.btn:focus-visible{outline:2px solid var(--ah-color-focus-ring, var(--ah-color-primary, #635dff));outline-offset:2px}.btn-primary{background-color:var(--ah-color-primary, #635dff);color:var(--ah-color-text-on-primary, #ffffff);margin-top:12px}.btn-primary:not(:disabled):hover{background-color:var(--ah-color-primary-hover, color-mix(in srgb, var(--ah-color-primary, #635dff) 85%, black))}.btn-secondary{background-color:var(--ah-color-bg, #ffffff);color:var(--ah-btn-secondary-text, var(--ah-color-text, #1e212a));border:var(--ah-btn-border-width, 1px) solid var(--ah-btn-secondary-border, var(--ah-color-border, #c9cace))}.btn-secondary:not(:disabled):hover{background-color:var(--ah-color-bg-hover, #f5f5f5);border-color:var(--ah-color-border-hover, #65676e)}.btn-link{background:none;border:none;color:var(--ah-color-link, #635dff);padding:8px 0;font-weight:var(--ah-font-weight-link, 400);text-decoration:none}.btn-link:hover{text-decoration:underline}.phone-input-wrapper{display:flex;align-items:stretch;gap:0;width:100%}.country-select{flex-shrink:0;width:auto;padding:12px 8px;font-size:var(--ah-font-size-body, 16px);font-family:var(--ah-font-family, inherit);border:var(--ah-input-border-width, 1px) solid var(--ah-color-border, #c9cace);border-right:none;border-radius:var(--ah-input-radius, 4px) 0 0 var(--ah-input-radius, 4px);background-color:var(--ah-color-input-bg, var(--ah-color-surface, #fff));color:var(--ah-color-input-text, var(--ah-color-text, #1e212a));cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;padding-right:22px}.country-select:focus{outline:none;border-color:var(--ah-color-primary, #635dff);box-shadow:0 0 0 1px var(--ah-color-primary, #635dff)}.country-select:disabled{opacity:0.5;cursor:not-allowed}.phone-input-wrapper .input-container{flex:1;min-width:0}.phone-input-wrapper .input-field{border-radius:0 var(--ah-input-radius, 4px) var(--ah-input-radius, 4px) 0}.phone-input-wrapper .input-label.floating,.phone-input-wrapper .input-field:focus+.input-label,.phone-input-wrapper .input-field:not(:placeholder-shown)+.input-label{left:8px}.social-buttons{display:flex;flex-direction:column;gap:12px}.btn-social{display:flex;align-items:center;justify-content:center;gap:12px}.btn-social-content{display:flex;flex-direction:column;align-items:center;text-align:center}.btn-social-subtitle{font-size:12px;font-style:italic;opacity:0.8;margin-top:2px}.btn-social-subtitle:empty{display:none}.social-icon{width:20px;height:20px;flex-shrink:0}@media (max-width: 480px){.social-buttons:has(.btn-social:nth-child(3)){flex-direction:row;flex-wrap:nowrap;justify-content:stretch;gap:8px}.social-buttons:has(.btn-social:nth-child(3)) .btn-social{width:auto;min-width:0;padding:12px;flex:1 1 0}.social-buttons:has(.btn-social:nth-child(3)) .btn-social span{display:none}.social-buttons:has(.btn-social:nth-child(3)) .social-icon{width:24px;height:24px}}.btn-icon{width:20px;height:20px;flex-shrink:0}.btn-icon img{width:100%;height:100%;object-fit:contain}.text-title{font-size:var(--ah-font-size-title, 20px);font-weight:var(--ah-font-weight-title, 400);color:var(--ah-color-text-header, var(--ah-color-header, #1e212a));margin:8px 0;line-height:1.3}.text-title.text-success{color:var(--ah-color-success, #13a769)}.text-description{font-size:var(--ah-font-size-subtitle, 14px);font-weight:var(--ah-font-weight-subtitle, 400);color:var(--ah-color-text-muted, #65676e);margin:4px 0;line-height:1.5}.image{display:block;max-width:100%;height:auto;border-radius:4px}.image-centered{margin:0 auto 16px;width:52px;height:52px;object-fit:contain}.link{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:var(--ah-font-size-link, 14px);transition:color 0.15s ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid var(--ah-color-focus-ring, var(--ah-color-link, #635dff));outline-offset:2px;border-radius:2px}.node-error{padding:12px 16px;background-color:var(--ah-color-error-bg, #ffeaea);color:var(--ah-color-error, #d03c38);border-left:3px solid var(--ah-color-error, #d03c38);border-radius:0;font-size:14px;margin-bottom:16px}.node-success{padding:12px 16px;background-color:var(--ah-color-success-bg, #e6f9f1);color:var(--ah-color-success, #13a769);border-left:3px solid var(--ah-color-success, #13a769);border-radius:0;font-size:14px;margin-bottom:16px}.divider{display:flex;align-items:center;text-align:center;margin:16px 0}.divider::before,.divider::after{content:"";flex:1;border-bottom:1px solid var(--ah-color-border-muted, #c9cace)}.divider-text{padding:0 10px;font-size:12px;font-weight:400;color:var(--ah-color-text-muted, #65676e);text-transform:uppercase;letter-spacing:0.5px}.rich-text{font-size:var(--ah-font-size-body, 14px);font-weight:var(--ah-font-weight-body, 400);line-height:1.5;color:var(--ah-color-text, #1e212a)}.rich-text a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);transition:color 0.15s ease}.rich-text a:hover{text-decoration:underline}.rich-text .terms-text{margin-top:16px;text-align:center;font-size:12px;color:var(--ah-color-text-muted, #65676e)}.rich-text .terms-text a{font-size:12px}.rich-text .forgot-password-link{text-align:right;font-size:13px;margin-top:4px}.rich-text .forgot-password-link a{font-size:13px;color:var(--ah-color-link, #635dff)}.rich-text .passwordless-link{margin-top:16px;text-align:center;font-size:14px}.rich-text .passwordless-link a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none)}.rich-text .passwordless-link a:hover{text-decoration:underline}.rich-text .signup-link{margin-top:16px;text-align:center;font-size:14px;color:var(--ah-color-text, #1e212a)}`;
239
+ const authheroNodeCss = () => `:host{display:block}.input-wrapper{display:flex;flex-direction:column;position:relative;margin-top:8px;margin-bottom:16px}.input-container{position:relative;width:100%}.input-label{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:var(--ah-font-size-label, 16px);font-weight:var(--ah-font-weight-label, 400);color:var(--ah-color-text-muted, #65676e);pointer-events:none;transition:all 0.15s ease-out;background-color:transparent;padding:0;z-index:1}.input-label.floating,.input-field:focus+.input-label,.input-field:not(:placeholder-shown)+.input-label,select.input-field+.input-label,input[type="date"].input-field+.input-label{top:-8px;transform:translateY(0);font-size:12px;background-color:var(--ah-color-bg, #ffffff);padding:0 4px;left:12px;color:var(--ah-color-text-muted, #65676e)}.input-field:focus+.input-label{color:var(--ah-color-primary, #635dff)}.required{color:var(--ah-color-error, #d03c38);margin-left:2px}.input-field{width:100%;padding:16px;font-size:16px;font-family:inherit;color:var(--ah-color-input-text, var(--ah-color-text, #1e212a));background-color:var(--ah-color-input-bg, #ffffff);border:var(--ah-input-border-width, 1px) solid var(--ah-color-border, #c9cace);border-radius:var(--ah-input-radius, 3px);outline:none;transition:border-color 0.15s ease-out, box-shadow 0.15s ease-out;box-sizing:border-box}.input-field::placeholder{color:transparent}.input-field:hover{border-color:var(--ah-color-border-hover, #65676e)}.input-field:focus{border-color:var(--ah-color-primary, #635dff);box-shadow:inset 0 0 0 1px var(--ah-color-primary, #635dff)}.input-field.has-error{border-color:var(--ah-color-error, #d03c38)}.input-field.has-error:focus{box-shadow:inset 0 0 0 1px var(--ah-color-error, #d03c38)}.input-field:disabled{background-color:var(--ah-color-bg-disabled, #f5f5f5);border-color:var(--ah-color-border-disabled, #e0e1e3);cursor:not-allowed;opacity:0.7}.password-container{position:relative;display:flex;align-items:center}.password-container .input-field{padding-right:48px}.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--ah-color-icon, var(--ah-color-text-muted, #65676e));transition:color 0.15s ease}.password-toggle:hover{color:var(--ah-color-icon, var(--ah-color-text, #1e212a))}.password-toggle svg{width:20px;height:20px}.error-text{font-size:12px;color:var(--ah-color-error, #d03c38);margin-top:4px;line-height:1.4}.helper-text{font-size:12px;color:var(--ah-color-text-muted, #65676e);margin-top:4px;line-height:1.4}.field-link{display:block;text-align:left;margin-top:8px;margin-bottom:16px}.field-link a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:var(--ah-font-size-link, 14px);font-weight:var(--ah-font-weight-link, 400)}.field-link a:hover{text-decoration:underline}.checkbox-wrapper{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin-bottom:16px}.checkbox-wrapper input[type="checkbox"]{width:18px;height:18px;margin:0;accent-color:var(--ah-color-primary, #635dff);cursor:pointer;flex-shrink:0}.checkbox-label{font-size:var(--ah-font-size-body, 14px);font-weight:var(--ah-font-weight-body, 400);color:var(--ah-color-text, #1e212a);line-height:1.5}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 20px;font-size:var(--ah-font-size-btn, 16px);font-weight:var(--ah-font-weight-btn, 400);font-family:inherit;line-height:1.25;text-align:center;text-decoration:none;border:none;border-radius:var(--ah-btn-radius, 3px);cursor:pointer;transition:background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;box-sizing:border-box}.btn:disabled{opacity:0.6;cursor:not-allowed}.btn:not(:disabled):active{transform:scale(0.98)}.btn:focus-visible{outline:2px solid var(--ah-color-focus-ring, var(--ah-color-primary, #635dff));outline-offset:2px}.btn-primary{background-color:var(--ah-color-primary, #635dff);color:var(--ah-color-text-on-primary, #ffffff);margin-top:12px}.btn-primary:not(:disabled):hover{background-color:var(--ah-color-primary-hover, color-mix(in srgb, var(--ah-color-primary, #635dff) 85%, black))}.btn-secondary{background-color:var(--ah-color-bg, #ffffff);color:var(--ah-btn-secondary-text, var(--ah-color-text, #1e212a));border:var(--ah-btn-border-width, 1px) solid var(--ah-btn-secondary-border, var(--ah-color-border, #c9cace))}.btn-secondary:not(:disabled):hover{background-color:var(--ah-color-bg-hover, #f5f5f5);border-color:var(--ah-color-border-hover, #65676e)}.btn-link{background:none;border:none;color:var(--ah-color-link, #635dff);padding:8px 0;font-weight:var(--ah-font-weight-link, 400);text-decoration:none}.btn-link:hover{text-decoration:underline}.phone-input-wrapper{display:flex;align-items:stretch;gap:0;width:100%}.country-select{flex-shrink:0;width:auto;padding:12px 8px;font-size:var(--ah-font-size-body, 16px);font-family:var(--ah-font-family, inherit);border:var(--ah-input-border-width, 1px) solid var(--ah-color-border, #c9cace);border-right:none;border-radius:var(--ah-input-radius, 4px) 0 0 var(--ah-input-radius, 4px);background-color:var(--ah-color-input-bg, var(--ah-color-surface, #fff));color:var(--ah-color-input-text, var(--ah-color-text, #1e212a));cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;padding-right:22px}.country-select:focus{outline:none;border-color:var(--ah-color-primary, #635dff);box-shadow:0 0 0 1px var(--ah-color-primary, #635dff)}.country-select:disabled{opacity:0.5;cursor:not-allowed}.phone-input-wrapper .input-container{flex:1;min-width:0}.phone-input-wrapper .input-field{border-radius:0 var(--ah-input-radius, 4px) var(--ah-input-radius, 4px) 0}.phone-input-wrapper .input-label.floating,.phone-input-wrapper .input-field:focus+.input-label,.phone-input-wrapper .input-field:not(:placeholder-shown)+.input-label{left:8px}.social-buttons{display:flex;flex-direction:column;gap:12px}.btn-social{display:flex;align-items:center;justify-content:center;gap:12px}.btn-social-content{display:flex;flex-direction:column;align-items:center;text-align:center}.btn-social-subtitle{font-size:12px;font-style:italic;opacity:0.8;margin-top:2px}.btn-social-subtitle:empty{display:none}.social-icon{width:20px;height:20px;flex-shrink:0}@media (max-width: 480px){.social-buttons:has(.btn-social:nth-child(3)){flex-direction:row;flex-wrap:nowrap;justify-content:stretch;gap:8px}.social-buttons:has(.btn-social:nth-child(3)) .btn-social{width:auto;min-width:0;padding:12px;flex:1 1 0}.social-buttons:has(.btn-social:nth-child(3)) .btn-social span{display:none}.social-buttons:has(.btn-social:nth-child(3)) .social-icon{width:24px;height:24px}}.btn-icon{width:20px;height:20px;flex-shrink:0}.btn-icon img{width:100%;height:100%;object-fit:contain}.text-title{font-size:var(--ah-font-size-title, 20px);font-weight:var(--ah-font-weight-title, 400);color:var(--ah-color-text-header, var(--ah-color-header, #1e212a));margin:8px 0;line-height:1.3}.text-title.text-success{color:var(--ah-color-success, #13a769)}.text-description{font-size:var(--ah-font-size-subtitle, 14px);font-weight:var(--ah-font-weight-subtitle, 400);color:var(--ah-color-text-muted, #65676e);margin:4px 0;line-height:1.5}.image{display:block;max-width:100%;height:auto;border-radius:4px}.image-centered{margin:0 auto 16px;width:52px;height:52px;object-fit:contain}.link{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:var(--ah-font-size-link, 14px);transition:color 0.15s ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid var(--ah-color-focus-ring, var(--ah-color-link, #635dff));outline-offset:2px;border-radius:2px}.node-error{padding:12px 16px;background-color:var(--ah-color-error-bg, #ffeaea);color:var(--ah-color-error, #d03c38);border-left:3px solid var(--ah-color-error, #d03c38);border-radius:0;font-size:14px;margin-bottom:16px}.node-success{padding:12px 16px;background-color:var(--ah-color-success-bg, #e6f9f1);color:var(--ah-color-success, #13a769);border-left:3px solid var(--ah-color-success, #13a769);border-radius:0;font-size:14px;margin-bottom:16px}.divider{display:flex;align-items:center;text-align:center;margin:16px 0}.divider::before,.divider::after{content:"";flex:1;border-bottom:1px solid var(--ah-color-border-muted, #c9cace)}.divider-text{padding:0 10px;font-size:12px;font-weight:400;color:var(--ah-color-text-muted, #65676e);text-transform:uppercase;letter-spacing:0.5px}.rich-text{font-size:var(--ah-font-size-body, 14px);font-weight:var(--ah-font-weight-body, 400);line-height:1.5;color:var(--ah-color-text, #1e212a)}.rich-text a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);transition:color 0.15s ease}.rich-text a:hover{text-decoration:underline}.rich-text .terms-text{margin-top:16px;text-align:center;font-size:12px;color:var(--ah-color-text-muted, #65676e)}.rich-text .terms-text a{font-size:12px}.rich-text .forgot-password-link{text-align:right;font-size:13px;margin-top:4px}.rich-text .forgot-password-link a{font-size:13px;color:var(--ah-color-link, #635dff)}.rich-text .passwordless-link{margin-top:16px;text-align:center;font-size:14px}.rich-text .passwordless-link a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none)}.rich-text .passwordless-link a:hover{text-decoration:underline}.rich-text .signup-link{margin-top:16px;text-align:center;font-size:14px;color:var(--ah-color-text, #1e212a)}.code-field{position:relative}.code-input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:none;background:transparent;color:transparent;caret-color:transparent;font-family:inherit;letter-spacing:0;outline:none;cursor:text;-webkit-text-fill-color:transparent}.code-boxes{display:flex;align-items:center;gap:var(--ah-code-group-gap, 12px);justify-content:center}.code-group{display:flex;gap:0}.code-separator{color:var(--ah-color-text-muted, #65676e);font-size:var(--ah-code-font-size, 24px);user-select:none}.code-box-placeholder{color:var(--ah-color-text-muted, #65676e);opacity:0.4}.code-box{position:relative;flex:0 0 auto;width:var(--ah-code-box-width, 48px);height:var(--ah-code-box-height, 56px);display:flex;align-items:center;justify-content:center;font-size:var(--ah-code-font-size, 24px);font-family:inherit;color:var(--ah-color-input-text, var(--ah-color-text, #1e212a));background-color:var(--ah-color-input-bg, #ffffff);border:var(--ah-input-border-width, 1px) solid var(--ah-color-border, #c9cace);border-radius:0;transition:border-color 0.15s ease-out, box-shadow 0.15s ease-out;box-sizing:border-box}.code-box+.code-box{margin-left:calc(-1 * var(--ah-input-border-width, 1px))}.code-group .code-box:first-child{border-top-left-radius:var(--ah-input-radius, 3px);border-bottom-left-radius:var(--ah-input-radius, 3px)}.code-group .code-box:last-child{border-top-right-radius:var(--ah-input-radius, 3px);border-bottom-right-radius:var(--ah-input-radius, 3px)}.code-field:focus-within .code-box.is-active{z-index:1;border-color:var(--ah-color-primary, #635dff);box-shadow:inset 0 0 0 1px var(--ah-color-primary, #635dff)}.code-field.has-error .code-box{border-color:var(--ah-color-error, #d03c38)}.code-input:disabled{cursor:not-allowed}.code-input:disabled~.code-boxes .code-box{background-color:var(--ah-color-bg-disabled, #f5f5f5);border-color:var(--ah-color-border-disabled, #e0e1e3)}`;
240
240
 
241
241
  const AuthheroNode = class {
242
242
  constructor(hostRef) {
@@ -244,10 +244,7 @@ const AuthheroNode = class {
244
244
  this.fieldChange = createEvent(this, "fieldChange");
245
245
  this.buttonClick = createEvent(this, "buttonClick");
246
246
  }
247
- /**
248
- * The component configuration to render.
249
- * Follows Auth0 Forms component schema.
250
- */
247
+ get host() { return getElement(this); }
251
248
  component;
252
249
  /**
253
250
  * Current value for field components.
@@ -297,6 +294,16 @@ const AuthheroNode = class {
297
294
  this.initCountryFromConfig();
298
295
  this.initTelValue();
299
296
  }
297
+ componentDidLoad() {
298
+ // Auto-focus a code field so the caret starts in the first (leftmost) box.
299
+ if (this.component?.type === "CODE" && !this.disabled) {
300
+ const value = this.getEffectiveValue() ?? "";
301
+ if (value.length === 0) {
302
+ const input = this.host.shadowRoot?.querySelector("input.code-input");
303
+ input?.focus();
304
+ }
305
+ }
306
+ }
300
307
  initCountryFromConfig() {
301
308
  if (this.component?.type === "TEL") {
302
309
  const config = this.component.config;
@@ -455,6 +462,20 @@ const AuthheroNode = class {
455
462
  }
456
463
  }
457
464
  };
465
+ handleCodeInput = (e, length, mode, autoSubmit) => {
466
+ const target = e.target;
467
+ const disallowed = mode === "alphanumeric" ? /[^a-zA-Z0-9]/g : /\D/g;
468
+ const cleaned = target.value.replace(disallowed, "").slice(0, length);
469
+ // Reflect the sanitized value back so the visible boxes never show
470
+ // characters we stripped (e.g. a pasted "123-456").
471
+ if (cleaned !== target.value) {
472
+ target.value = cleaned;
473
+ }
474
+ this.fieldChange.emit({ id: this.component.id, value: cleaned });
475
+ if (autoSubmit && cleaned.length === length) {
476
+ this.buttonClick.emit({ id: "submit", type: "submit", value: "next" });
477
+ }
478
+ };
458
479
  handleCheckbox = (e) => {
459
480
  const target = e.target;
460
481
  this.fieldChange.emit({
@@ -601,6 +622,60 @@ const AuthheroNode = class {
601
622
  }
602
623
  return (h("div", { class: "input-wrapper", part: "input-wrapper" }, h("div", { class: "input-container" }, h("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: component.sensitive ? "password" : "text", name: component.id, "data-input-name": component.id, value: effectiveValue ?? "", placeholder: " ", required: component.required, disabled: this.disabled, maxLength: max_length, autoComplete: autocomplete, onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
603
624
  }
625
+ /**
626
+ * Segmented one-time-code input (e.g. SMS/email verification codes).
627
+ *
628
+ * Rendered as a SINGLE real <input> overlaid (transparent) on a row of
629
+ * presentational boxes. This keeps native paste, iOS/Android SMS autofill
630
+ * (`autocomplete="one-time-code"`) and screen-reader behaviour working —
631
+ * all of which break when using one <input> per digit.
632
+ */
633
+ renderCodeField(component) {
634
+ const inputId = `input-${component.id}`;
635
+ const errors = this.getErrors();
636
+ const hasError = errors.length > 0;
637
+ const config = (component.config ?? {});
638
+ const length = config.length ?? 6;
639
+ const mode = config.mode ?? "numeric";
640
+ const autoSubmit = config.auto_submit !== false;
641
+ const groupSize = config.group_size ?? 3;
642
+ const separator = config.separator ?? "-";
643
+ const placeholder = config.placeholder;
644
+ // Apply the same mode sanitization used on input (handleCodeInput) so a
645
+ // persisted/default value with invalid characters (e.g. "12-3a" in numeric
646
+ // mode) doesn't render until edited.
647
+ const disallowed = mode === "alphanumeric" ? /[^a-zA-Z0-9]/g : /\D/g;
648
+ const value = (this.getEffectiveValue() ?? "")
649
+ .replace(disallowed, "")
650
+ .slice(0, length);
651
+ const boxClass = (i) => {
652
+ let cls = "code-box";
653
+ if (i < value.length)
654
+ cls += " is-filled";
655
+ // Highlight the next empty box as the "caret" position while focused.
656
+ if (!this.disabled && i === value.length)
657
+ cls += " is-active";
658
+ return cls;
659
+ };
660
+ const renderBox = (i) => (h("div", { class: boxClass(i), part: "code-box" }, value[i] ??
661
+ (placeholder ? (h("span", { class: "code-box-placeholder" }, placeholder)) : (""))));
662
+ // Split into groups of `groupSize` (e.g. 3 → "123 - 456"); a non-positive
663
+ // or >= length size means a single ungrouped row.
664
+ const useGroups = groupSize > 0 && groupSize < length;
665
+ const groups = [];
666
+ if (useGroups) {
667
+ for (let start = 0; start < length; start += groupSize) {
668
+ groups.push(Array.from({ length: Math.min(groupSize, length - start) }, (_, j) => start + j));
669
+ }
670
+ }
671
+ else {
672
+ groups.push(Array.from({ length }, (_, i) => i));
673
+ }
674
+ return (h("div", { class: "input-wrapper", part: "input-wrapper" }, h("div", { class: hasError ? "code-field has-error" : "code-field", part: "code-field" }, h("input", { id: inputId, class: "code-input", part: "input code-input", type: "text", name: component.id, "data-input-name": component.id, value: value, inputMode: mode === "numeric" ? "numeric" : "text", autoComplete: "one-time-code", autoCapitalize: "off", autoCorrect: "off", spellcheck: false, maxLength: length, required: component.required, disabled: this.disabled, "aria-label": component.label, "aria-invalid": hasError ? "true" : "false", onInput: (e) => this.handleCodeInput(e, length, mode, autoSubmit), onKeyDown: this.handleKeyDown }), h("div", { class: "code-boxes", part: "code-boxes", "aria-hidden": "true" }, groups.map((group, gi) => [
675
+ gi > 0 && separator ? (h("span", { class: "code-separator", part: "code-separator" }, separator)) : null,
676
+ h("div", { class: "code-group", part: "code-group" }, group.map((i) => renderBox(i))),
677
+ ]))), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
678
+ }
604
679
  renderEmailField(component) {
605
680
  const inputId = `input-${component.id}`;
606
681
  const errors = this.getErrors();
@@ -773,6 +848,8 @@ const AuthheroNode = class {
773
848
  return this.renderTextField(this.component);
774
849
  case "EMAIL":
775
850
  return this.renderEmailField(this.component);
851
+ case "CODE":
852
+ return this.renderCodeField(this.component);
776
853
  case "PASSWORD":
777
854
  return this.renderPasswordField(this.component);
778
855
  case "NUMBER":
@@ -514,8 +514,15 @@ function escapeAttr(value) {
514
514
  .replace(/>/g, "&gt;");
515
515
  }
516
516
 
517
- const authheroWidgetCss = () => `:host{display:block;font-family:var(--ah-font-family, 'ulp-font', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, sans-serif);font-size:var(--ah-font-size-base, 16px);line-height:var(--ah-line-height-base, 1.5);color:var(--ah-color-text, #1e212a);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.widget-container{width:var(--ah-widget-max-width, 400px);margin:0 auto;background-color:var(--ah-color-bg, #ffffff);border-radius:var(--ah-widget-radius, 5px);border:var(--ah-widget-border-width, 0) solid var(--ah-widget-border-color, transparent);box-shadow:var(--ah-widget-shadow, 0 4px 22px 0 rgba(0, 0, 0, 0.11));box-sizing:border-box}.widget-header{padding:var(--ah-header-padding, 40px 48px 24px)}.widget-body{padding:var(--ah-body-padding, 0 48px 40px)}.logo-wrapper{display:var(--ah-logo-display, flex);justify-content:var(--ah-logo-align, center);margin-bottom:8px}.logo{display:block;height:var(--ah-logo-height, 52px);max-width:100%;width:auto;object-fit:contain}.title{font-size:var(--ah-font-size-title, 24px);font-weight:var(--ah-font-weight-title, 700);text-align:var(--ah-title-align, center);margin:var(--ah-title-margin, 24px 0 24px);color:var(--ah-color-text-header, var(--ah-color-header, #1e212a));line-height:1.2}.description{font-size:var(--ah-font-size-subtitle, 16px);font-weight:var(--ah-font-weight-subtitle, 400);text-align:var(--ah-title-align, center);margin:var(--ah-description-margin, 0 0 8px);color:var(--ah-color-text, #1e212a);line-height:1.5}.message{padding:12px 16px;border-radius:4px;margin-bottom:16px;font-size:14px;line-height:1.5}.message-error{background-color:var(--ah-color-error-bg, #ffeaea);color:var(--ah-color-error, #d03c38);border-left:3px solid var(--ah-color-error, #d03c38)}.message-success{background-color:var(--ah-color-success-bg, #e6f9f1);color:var(--ah-color-success, #13a769);border-left:3px solid var(--ah-color-success, #13a769)}form{display:flex;flex-direction:column}.form-content{display:flex;flex-direction:column}.social-section{display:flex;flex-direction:column;gap:8px;order:var(--ah-social-order, 2)}.fields-section{display:flex;flex-direction:column;order:var(--ah-fields-order, 0)}.divider{display:flex;align-items:center;text-align:center;margin:16px 0;order:var(--ah-divider-order, 1)}.divider::before,.divider::after{content:'';flex:1;border-bottom:1px solid var(--ah-color-border-muted, #c9cace)}.divider-text{padding:0 10px;font-size:12px;font-weight:400;color:var(--ah-color-text-muted, #65676e);text-transform:uppercase;letter-spacing:0}.links{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px}.link-wrapper{font-size:var(--ah-font-size-body, 14px);font-weight:var(--ah-font-weight-body, 400);color:var(--ah-color-text, #1e212a)}.link{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:var(--ah-font-size-link, 14px);font-weight:var(--ah-font-weight-link, 400);transition:color 150ms ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid var(--ah-color-focus-ring, var(--ah-color-link, #635dff));outline-offset:2px;border-radius:2px}.widget-footer{margin-top:16px;text-align:center;font-size:12px;color:var(--ah-color-text-muted, #65676e)}.widget-footer a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:12px;transition:color 150ms ease}.widget-footer a:hover{text-decoration:underline}.widget-footer a:focus-visible{outline:2px solid var(--ah-color-focus-ring, var(--ah-color-link, #635dff));outline-offset:2px;border-radius:2px}.loading-spinner{width:32px;height:32px;margin:24px auto;border:3px solid var(--ah-color-border-muted, #e0e1e3);border-top-color:var(--ah-color-primary, #635dff);border-radius:50%;animation:spin 0.8s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.error-message{text-align:center;color:var(--ah-color-error, #d03c38);padding:16px;font-size:14px}@media (max-width: 480px){:host{display:block;width:100%;min-height:100vh;background-color:var(--ah-color-bg, #ffffff)}.widget-container{box-shadow:none;border-radius:0;width:100%;margin:0}.widget-header{padding:24px 16px 16px}.widget-body{padding:0 16px 24px}}`;
517
+ const authheroWidgetCss = () => `:host{display:block;font-family:var(--ah-font-family, 'ulp-font', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, sans-serif);font-size:var(--ah-font-size-base, 16px);line-height:var(--ah-line-height-base, 1.5);color:var(--ah-color-text, #1e212a);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.widget-container{width:var(--ah-widget-max-width, 400px);margin:0 auto;background-color:var(--ah-color-bg, #ffffff);border-radius:var(--ah-widget-radius, 5px);border:var(--ah-widget-border-width, 0) solid var(--ah-widget-border-color, transparent);box-shadow:var(--ah-widget-shadow, 0 4px 22px 0 rgba(0, 0, 0, 0.11));box-sizing:border-box}.widget-header{padding:var(--ah-header-padding, 40px 48px 24px)}.widget-body{padding:var(--ah-body-padding, 0 48px 40px)}.logo-wrapper{display:var(--ah-logo-display, flex);justify-content:var(--ah-logo-align, center);margin-bottom:8px}.logo{display:block;height:var(--ah-logo-height, 52px);max-width:100%;width:auto;object-fit:contain}.title{font-size:var(--ah-font-size-title, 24px);font-weight:var(--ah-font-weight-title, 700);text-align:var(--ah-title-align, center);margin:var(--ah-title-margin, 24px 0 24px);color:var(--ah-color-text-header, var(--ah-color-header, #1e212a));line-height:1.2}.description{font-size:var(--ah-font-size-subtitle, 16px);font-weight:var(--ah-font-weight-subtitle, 400);text-align:var(--ah-title-align, center);margin:var(--ah-description-margin, 0 0 8px);color:var(--ah-color-text, #1e212a);line-height:1.5}.message{padding:12px 16px;border-radius:4px;margin-bottom:16px;font-size:14px;line-height:1.5}.message-error{background-color:var(--ah-color-error-bg, #ffeaea);color:var(--ah-color-error, #d03c38);border-left:3px solid var(--ah-color-error, #d03c38)}.message-success{background-color:var(--ah-color-success-bg, #e6f9f1);color:var(--ah-color-success, #13a769);border-left:3px solid var(--ah-color-success, #13a769)}form{display:flex;flex-direction:column}.form-content{display:flex;flex-direction:column}.social-section{display:flex;flex-direction:column;gap:8px;order:var(--ah-social-order, 2)}.fields-section{display:flex;flex-direction:column;order:var(--ah-fields-order, 0)}.fields-list{display:flex;flex-direction:column}.fields-list-scroll{max-height:var(--ah-choice-list-max-height, 320px);overflow-y:auto;gap:var(--ah-choice-list-gap, 8px);padding-right:4px}.choice-list-search{width:100%;padding:16px;margin-bottom:12px;font-size:16px;font-family:inherit;color:var(--ah-color-input-text, var(--ah-color-text, #1e212a));background-color:var(--ah-color-input-bg, #ffffff);border:var(--ah-input-border-width, 1px) solid var(--ah-color-border, #c9cace);border-radius:var(--ah-input-radius, 3px);outline:none;box-sizing:border-box;transition:border-color 0.15s ease-out, box-shadow 0.15s ease-out}.choice-list-search:hover{border-color:var(--ah-color-border-hover, #65676e)}.choice-list-search:focus{border-color:var(--ah-color-primary, var(--ah-color-link, #635dff))}.choice-list-empty{padding:16px;text-align:center;font-size:14px;color:var(--ah-color-text-muted, #65676e)}.divider{display:flex;align-items:center;text-align:center;margin:16px 0;order:var(--ah-divider-order, 1)}.divider::before,.divider::after{content:'';flex:1;border-bottom:1px solid var(--ah-color-border-muted, #c9cace)}.divider-text{padding:0 10px;font-size:12px;font-weight:400;color:var(--ah-color-text-muted, #65676e);text-transform:uppercase;letter-spacing:0}.links{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px}.link-wrapper{font-size:var(--ah-font-size-body, 14px);font-weight:var(--ah-font-weight-body, 400);color:var(--ah-color-text, #1e212a)}.link{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:var(--ah-font-size-link, 14px);font-weight:var(--ah-font-weight-link, 400);transition:color 150ms ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid var(--ah-color-focus-ring, var(--ah-color-link, #635dff));outline-offset:2px;border-radius:2px}.widget-footer{margin-top:16px;text-align:center;font-size:12px;color:var(--ah-color-text-muted, #65676e)}.widget-footer a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:12px;transition:color 150ms ease}.widget-footer a:hover{text-decoration:underline}.widget-footer a:focus-visible{outline:2px solid var(--ah-color-focus-ring, var(--ah-color-link, #635dff));outline-offset:2px;border-radius:2px}.loading-spinner{width:32px;height:32px;margin:24px auto;border:3px solid var(--ah-color-border-muted, #e0e1e3);border-top-color:var(--ah-color-primary, #635dff);border-radius:50%;animation:spin 0.8s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.error-message{text-align:center;color:var(--ah-color-error, #d03c38);padding:16px;font-size:14px}@media (max-width: 480px){:host{display:block;width:100%;min-height:100vh;background-color:var(--ah-color-bg, #ffffff)}.widget-container{box-shadow:none;border-radius:0;width:100%;margin:0}.widget-header{padding:24px 16px 16px}.widget-body{padding:0 16px 24px}}`;
518
518
 
519
+ /**
520
+ * When a screen's field section is made up entirely of choice buttons
521
+ * (NEXT_BUTTON) and there are more than this many, the widget renders them as
522
+ * a scrollable list with a search box on top instead of a tall column of
523
+ * buttons. Used by long pick-one screens such as tenant selection.
524
+ */
525
+ const CHOICE_LIST_SEARCH_THRESHOLD = 5;
519
526
  const AuthheroWidget = class {
520
527
  constructor(hostRef) {
521
528
  registerInstance(this, hostRef);
@@ -628,6 +635,12 @@ const AuthheroWidget = class {
628
635
  * Form data collected from inputs.
629
636
  */
630
637
  formData = {};
638
+ /**
639
+ * Search query used to filter long choice-button lists (e.g. the
640
+ * tenant-select screen). Only applied when the screen is rendered as a
641
+ * searchable choice list — see CHOICE_LIST_SEARCH_THRESHOLD.
642
+ */
643
+ listFilter = "";
631
644
  /**
632
645
  * AbortController for an in-flight conditional mediation request.
633
646
  * Aborted on screen change or component disconnect.
@@ -688,6 +701,7 @@ const AuthheroWidget = class {
688
701
  }
689
702
  if (this._screen) {
690
703
  this.formData = {};
704
+ this.listFilter = "";
691
705
  this.initFormDataFromDefaults(this._screen);
692
706
  this.screenChange.emit(this._screen);
693
707
  this.updateDataScreenAttribute();
@@ -1131,6 +1145,8 @@ const AuthheroWidget = class {
1131
1145
  this._screen = data;
1132
1146
  }
1133
1147
  if (this._screen) {
1148
+ // New screen fetched — drop any stale searchable-list filter.
1149
+ this.listFilter = "";
1134
1150
  // If we fetched with a screenId override, update our stored screenId
1135
1151
  if (currentScreenId && currentScreenId !== this.screenId) {
1136
1152
  this.screenId = currentScreenId;
@@ -1248,6 +1264,7 @@ const AuthheroWidget = class {
1248
1264
  // freeze a disabled button into the cross-fade.
1249
1265
  this.loading = false;
1250
1266
  this._screen = result.screen;
1267
+ this.listFilter = "";
1251
1268
  this.initFormDataFromDefaults(result.screen);
1252
1269
  this.screenChange.emit(result.screen);
1253
1270
  this.updateDataScreenAttribute();
@@ -1261,6 +1278,7 @@ const AuthheroWidget = class {
1261
1278
  // freeze a disabled button into the cross-fade.
1262
1279
  this.loading = false;
1263
1280
  this._screen = result.screen;
1281
+ this.listFilter = "";
1264
1282
  this.formData = {};
1265
1283
  this.initFormDataFromDefaults(result.screen);
1266
1284
  this.screenChange.emit(result.screen);
@@ -1893,6 +1911,13 @@ const AuthheroWidget = class {
1893
1911
  isDividerComponent(component) {
1894
1912
  return component.type === "DIVIDER";
1895
1913
  }
1914
+ /**
1915
+ * Visible label of a choice button, used to filter searchable choice lists.
1916
+ */
1917
+ getChoiceButtonText(component) {
1918
+ const config = component.config;
1919
+ return config?.text ?? "";
1920
+ }
1896
1921
  render() {
1897
1922
  const screen = this._screen;
1898
1923
  if (this.loading && !screen) {
@@ -1915,6 +1940,16 @@ const AuthheroWidget = class {
1915
1940
  const dividerComponent = components.find((c) => this.isDividerComponent(c));
1916
1941
  const hasDivider = !!dividerComponent;
1917
1942
  const dividerText = dividerComponent?.config?.text || "Or";
1943
+ // A "choice list" screen is one whose entire field section is pick-one
1944
+ // buttons (e.g. tenant selection). When the list is long, render it as a
1945
+ // searchable, scrollable list instead of a tall column of buttons.
1946
+ const choiceButtons = fieldComponents.filter((c) => c.type === "NEXT_BUTTON");
1947
+ const isSearchableChoiceList = choiceButtons.length === fieldComponents.length &&
1948
+ choiceButtons.length > CHOICE_LIST_SEARCH_THRESHOLD;
1949
+ const filterQuery = this.listFilter.trim().toLowerCase();
1950
+ const visibleChoiceButtons = isSearchableChoiceList && filterQuery
1951
+ ? choiceButtons.filter((c) => this.getChoiceButtonText(c).toLowerCase().includes(filterQuery))
1952
+ : choiceButtons;
1918
1953
  // Build dynamic exportparts for social buttons including provider-specific parts
1919
1954
  const getExportParts = (component) => {
1920
1955
  const baseParts = [
@@ -1945,7 +1980,19 @@ const AuthheroWidget = class {
1945
1980
  const logoUrl = this._theme?.widget?.logo_url || this._branding?.logo_url;
1946
1981
  return (h("div", { class: "widget-container", part: "container", "data-authstack-container": true }, h("header", { class: "widget-header", part: "header" }, logoUrl && (h("div", { class: "logo-wrapper", part: "logo-wrapper" }, h("img", { class: "logo", part: "logo", src: logoUrl, alt: "Logo" }))), screen.title && (h("h1", { class: "title", part: "title", innerHTML: sanitizeHtml(screen.title) })), screen.description && (h("p", { class: "description", part: "description", innerHTML: sanitizeHtml(screen.description) }))), h("div", { class: "widget-body", part: "body" }, screenErrors.map((err) => (h("div", { class: "message message-error", part: "message message-error", key: err.id ?? err.text }, err.text))), screenSuccesses.map((msg) => (h("div", { class: "message message-success", part: "message message-success", key: msg.id ?? msg.text }, msg.text))), h("form", { onSubmit: this.handleSubmit, action: screen.action, method: screen.method || "POST", part: "form" }, hiddenComponents.map((c) => (h("input", { type: "hidden", name: c.id, id: c.id, key: c.id, value: this.formData[c.id] || "" }))), h("div", { class: "form-content" }, socialComponents.length > 0 && (h("div", { class: "social-section", part: "social-section" }, socialComponents.map((component) => (h("authhero-node", { key: component.id, component: component, value: this.formData[component.id], onFieldChange: (e) => this.handleInputChange(e.detail.id, e.detail.value), onButtonClick: (e) => this.handleButtonClick(e.detail), disabled: this.loading, exportparts: getExportParts(component) }))))), socialComponents.length > 0 &&
1947
1982
  fieldComponents.length > 0 &&
1948
- hasDivider && (h("div", { class: "divider", part: "divider" }, h("span", { class: "divider-text" }, dividerText))), h("div", { class: "fields-section", part: "fields-section" }, fieldComponents.map((component) => (h("authhero-node", { key: component.id, component: component, value: this.formData[component.id], onFieldChange: (e) => this.handleInputChange(e.detail.id, e.detail.value), onButtonClick: (e) => this.handleButtonClick(e.detail), disabled: this.loading })))))), screen.links && screen.links.length > 0 && (h("div", { class: "links", part: "links" }, screen.links.map((link) => (h("span", { class: "link-wrapper", part: "link-wrapper", key: link.id ?? link.href }, link.linkText ? (h("span", null, link.text, " ", h("a", { href: link.href, class: "link", part: "link", onClick: (e) => this.handleLinkClick(e, {
1983
+ hasDivider && (h("div", { class: "divider", part: "divider" }, h("span", { class: "divider-text" }, dividerText))), h("div", { class: "fields-section", part: "fields-section" }, isSearchableChoiceList && (h("input", { type: "text", class: "choice-list-search", part: "choice-list-search", placeholder: "Search", "aria-label": "Search", autocomplete: "off", value: this.listFilter, onInput: (e) => (this.listFilter = e.target.value), onKeyDown: (e) => {
1984
+ // The search box lives inside the form; Enter would
1985
+ // submit with no choice selected. Swallow it.
1986
+ if (e.key === "Enter")
1987
+ e.preventDefault();
1988
+ } })), h("div", { class: isSearchableChoiceList
1989
+ ? "fields-list fields-list-scroll"
1990
+ : "fields-list", part: isSearchableChoiceList
1991
+ ? "fields-list fields-list-scroll"
1992
+ : "fields-list" }, (isSearchableChoiceList
1993
+ ? visibleChoiceButtons
1994
+ : fieldComponents).map((component) => (h("authhero-node", { key: component.id, component: component, value: this.formData[component.id], onFieldChange: (e) => this.handleInputChange(e.detail.id, e.detail.value), onButtonClick: (e) => this.handleButtonClick(e.detail), disabled: this.loading }))), isSearchableChoiceList &&
1995
+ visibleChoiceButtons.length === 0 && (h("div", { class: "choice-list-empty", part: "choice-list-empty" }, "No matches")))))), screen.links && screen.links.length > 0 && (h("div", { class: "links", part: "links" }, screen.links.map((link) => (h("span", { class: "link-wrapper", part: "link-wrapper", key: link.id ?? link.href }, link.linkText ? (h("span", null, link.text, " ", h("a", { href: link.href, class: "link", part: "link", onClick: (e) => this.handleLinkClick(e, {
1949
1996
  id: link.id,
1950
1997
  href: link.href,
1951
1998
  text: link.linkText || link.text,
@@ -17,5 +17,5 @@ var patchBrowser = () => {
17
17
 
18
18
  patchBrowser().then(async (options) => {
19
19
  await globalScripts();
20
- return bootstrapLazy([["authhero-node",[[513,"authhero-node",{"component":[16],"value":[1],"disabled":[4],"passwordVisible":[32],"selectedCountry":[32],"localPhoneNumber":[32],"countryDropdownOpen":[32],"telEmailMode":[32]},null,{"component":[{"componentChanged":0}],"value":[{"valueChanged":0}]}]]],["authhero-widget",[[513,"authhero-widget",{"screen":[1],"apiUrl":[1,"api-url"],"baseUrl":[1,"base-url"],"state":[1025],"screenId":[1025,"screen-id"],"authParams":[1,"auth-params"],"statePersistence":[1,"state-persistence"],"storageKey":[1,"storage-key"],"branding":[1],"theme":[1],"loading":[1028],"autoSubmit":[4,"auto-submit"],"autoNavigate":[4,"auto-navigate"],"_screen":[32],"_authParams":[32],"_branding":[32],"_theme":[32],"formData":[32]},null,{"screenId":[{"watchScreenId":0}],"screen":[{"watchScreen":0}],"branding":[{"watchBranding":0}],"theme":[{"watchTheme":0}],"authParams":[{"watchAuthParams":0}]}]]]], options);
20
+ return bootstrapLazy([["authhero-node",[[513,"authhero-node",{"component":[16],"value":[1],"disabled":[4],"passwordVisible":[32],"selectedCountry":[32],"localPhoneNumber":[32],"countryDropdownOpen":[32],"telEmailMode":[32]},null,{"component":[{"componentChanged":0}],"value":[{"valueChanged":0}]}]]],["authhero-widget",[[513,"authhero-widget",{"screen":[1],"apiUrl":[1,"api-url"],"baseUrl":[1,"base-url"],"state":[1025],"screenId":[1025,"screen-id"],"authParams":[1,"auth-params"],"statePersistence":[1,"state-persistence"],"storageKey":[1,"storage-key"],"branding":[1],"theme":[1],"loading":[1028],"autoSubmit":[4,"auto-submit"],"autoNavigate":[4,"auto-navigate"],"_screen":[32],"_authParams":[32],"_branding":[32],"_theme":[32],"formData":[32],"listFilter":[32]},null,{"screenId":[{"watchScreenId":0}],"screen":[{"watchScreen":0}],"branding":[{"watchBranding":0}],"theme":[{"watchTheme":0}],"authParams":[{"watchAuthParams":0}]}]]]], options);
21
21
  });