@authhero/widget 0.2.2 → 0.4.1

package/dist/components/p-DS6y_iDJ.js

@@ -0,0 +1 @@
+import{t as e,p as r,H as t,c as a,h as i}from"./p-086EZrPM.js";const s=r(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.fieldChange=a(this,"fieldChange"),this.buttonClick=a(this,"buttonClick")}component;value;disabled=!1;fieldChange;buttonClick;handleInput=e=>{this.fieldChange.emit({id:this.component.id,value:e.target.value})};handleCheckbox=e=>{this.fieldChange.emit({id:this.component.id,value:e.target.checked?"true":"false"})};handleButtonClick=(e,r,t)=>{"submit"!==r&&e.preventDefault(),this.buttonClick.emit({id:this.component.id,type:r,value:t})};getErrors(){const e=this.component;return e.messages?.filter((e=>"error"===e.type))||[]}renderLabel(e,r,t){return e?i("label",{class:"input-label",part:"label",htmlFor:r},e,t&&i("span",{class:"required"},"*")):null}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:r,alt:t,width:a,height:s}=e.config??{};return r?i("img",{class:"image",part:"image",src:r,alt:t??"",width:a,height:s,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",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:r=>this.handleButtonClick(r,"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:r=>this.handleButtonClick(r,"resend",e.config.resend_action)},e.config.text??"Resend")}renderTextField(e){const r=`input-${e.id}`,t=this.getErrors(),{placeholder:a,multiline:s,max_length:o}=e.config??{};return i("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(e.label,r,e.required),s?i("textarea",{id:r,class:{"input-field":!0,"has-error":t.length>0},part:"input textarea",name:e.id,placeholder:a,required:e.required,disabled:this.disabled,maxLength:o,onInput:this.handleInput},this.value??""):i("input",{id:r,class:{"input-field":!0,"has-error":t.length>0},part:"input",type:e.sensitive?"password":"text",name:e.id,value:this.value??"",placeholder:a,required:e.required,disabled:this.disabled,maxLength:o,onInput:this.handleInput}),this.renderErrors(),0===t.length&&this.renderHint(e.hint))}renderEmailField(e){const r=`input-${e.id}`,t=this.getErrors();return i("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(e.label,r,e.required),i("input",{id:r,class:{"input-field":!0,"has-error":t.length>0},part:"input",type:"email",name:e.id,value:this.value??"",placeholder:e.config?.placeholder,required:e.required,disabled:this.disabled,autocomplete:"email",onInput:this.handleInput}),this.renderErrors(),0===t.length&&this.renderHint(e.hint))}renderPasswordField(e){const r=`input-${e.id}`,t=this.getErrors();return i("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(e.label,r,e.required),i("input",{id:r,class:{"input-field":!0,"has-error":t.length>0},part:"input",type:"password",name:e.id,value:this.value??"",placeholder:e.config?.placeholder,required:e.required,disabled:this.disabled,minLength:e.config?.min_length,autocomplete:"current-password",onInput:this.handleInput}),this.renderErrors(),0===t.length&&this.renderHint(e.hint))}renderNumberField(e){const r=`input-${e.id}`,t=this.getErrors(),{placeholder:a,min:s,max:o,step:n}=e.config??{};return i("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(e.label,r,e.required),i("input",{id:r,class:{"input-field":!0,"has-error":t.length>0},part:"input",type:"number",name:e.id,value:this.value??"",placeholder:a,required:e.required,disabled:this.disabled,min:s,max:o,step:n,onInput:this.handleInput}),this.renderErrors(),0===t.length&&this.renderHint(e.hint))}renderTelField(e){const r=`input-${e.id}`,t=this.getErrors();return i("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(e.label,r,e.required),i("input",{id:r,class:{"input-field":!0,"has-error":t.length>0},part:"input",type:"tel",name:e.id,value:this.value??"",placeholder:e.config?.placeholder,required:e.required,disabled:this.disabled,autocomplete:"tel",onInput:this.handleInput}),this.renderErrors(),0===t.length&&this.renderHint(e.hint))}renderUrlField(e){const r=`input-${e.id}`,t=this.getErrors();return i("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(e.label,r,e.required),i("input",{id:r,class:{"input-field":!0,"has-error":t.length>0},part:"input",type:"url",name:e.id,value:this.value??"",placeholder:e.config?.placeholder,required:e.required,disabled:this.disabled,onInput:this.handleInput}),this.renderErrors(),0===t.length&&this.renderHint(e.hint))}renderDateField(e){const r=`input-${e.id}`,t=this.getErrors(),{min:a,max:s}=e.config??{};return i("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(e.label,r,e.required),i("input",{id:r,class:{"input-field":!0,"has-error":t.length>0},part:"input",type:"date",name:e.id,value:this.value??"",required:e.required,disabled:this.disabled,min:a,max:s,onInput:this.handleInput}),this.renderErrors(),0===t.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 r=e.config?.text??e.label??"",t=!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}),t?i("span",{class:"checkbox-label",part:"checkbox-label",innerHTML:r}):i("span",{class:"checkbox-label",part:"checkbox-label"},r))}renderDropdownField(e){const r=`input-${e.id}`,t=this.getErrors(),{options:a,placeholder:s}=e.config??{};return i("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(e.label,r,e.required),i("select",{id:r,class:{"input-field":!0,"has-error":t.length>0},part:"input select",name:e.id,required:e.required,disabled:this.disabled,onChange:this.handleInput},s&&i("option",{value:"",disabled:!0,selected:!this.value},s),a?.map((e=>i("option",{value:e.value,selected:this.value===e.value,key:e.value},e.label)))),this.renderErrors(),0===t.length&&this.renderHint(e.hint))}renderChoiceField(e){const r=this.getErrors(),{options:t,display:a}=e.config??{},s="checkbox"===a,o=s?"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"},t?.map((r=>i("label",{class:"choice-option",part:"choice-option",key:r.value},i("input",{type:o,part:o,name:e.id,value:r.value,checked:this.value===r.value,required:e.required&&!s,disabled:this.disabled,onChange:this.handleInput}),i("span",null,r.label))))),this.renderErrors(),0===r.length&&this.renderHint(e.hint))}renderSocialField(e){return i("div",{class:"social-buttons",part:"social-buttons"},(e.config?.providers??[]).map((e=>i("button",{type:"button",class:"btn btn-secondary btn-social",part:"button button-secondary button-social","data-provider":e,disabled:this.disabled,onClick:r=>this.handleButtonClick(r,"social",e),key:e},"Continue with ",e.charAt(0).toUpperCase()+e.slice(1)))))}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"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"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 style(){return":host{display:block}.input-wrapper{display:flex;flex-direction:column;gap:var(--ah-space-1, 0.25rem)}.input-label{font-size:var(--ah-font-size-sm, 0.875rem);font-weight:var(--ah-font-weight-medium, 500);color:var(--ah-color-text-label, #374151);line-height:var(--ah-line-height-normal, 1.5)}.required{color:var(--ah-color-error, #dc2626);margin-left:var(--ah-space-1, 0.25rem)}.input-field{padding:var(--ah-input-padding-y, 0.75rem) var(--ah-input-padding-x, 1rem);font-size:var(--ah-font-size-base, 1rem);font-family:inherit;color:var(--ah-color-text, #1f2937);background-color:var(--ah-color-bg, #ffffff);border:var(--ah-input-border-width, 1px) solid var(--ah-color-border, #d1d5db);border-radius:var(--ah-input-radius, 6px);outline:none;transition:border-color var(--ah-transition-base, 200ms ease),               box-shadow var(--ah-transition-base, 200ms ease)}.input-field::placeholder{color:var(--ah-color-text-muted, #9ca3af)}.input-field:focus{border-color:var(--ah-color-primary, #0066cc);box-shadow:0 0 0 3px var(--ah-color-primary-focus-ring, rgba(0, 102, 204, 0.1))}.input-field.has-error{border-color:var(--ah-color-error, #dc2626)}.input-field.has-error:focus{box-shadow:0 0 0 3px rgba(220, 38, 38, 0.1)}.input-field:disabled{background-color:var(--ah-color-bg-disabled, #f3f4f6);cursor:not-allowed;opacity:0.7}.error-text{font-size:var(--ah-font-size-xs, 0.75rem);color:var(--ah-color-error, #dc2626);margin-top:var(--ah-space-1, 0.25rem)}.helper-text{font-size:var(--ah-font-size-xs, 0.75rem);color:var(--ah-color-text-muted, #6b7280);margin-top:var(--ah-space-1, 0.25rem)}.checkbox-wrapper{display:flex;align-items:flex-start;gap:var(--ah-space-2, 0.5rem);cursor:pointer}.checkbox-wrapper input[type='checkbox']{width:1rem;height:1rem;margin-top:0.125rem;accent-color:var(--ah-color-primary, #0066cc);cursor:pointer}.checkbox-label{font-size:var(--ah-font-size-sm, 0.875rem);color:var(--ah-color-text-label, #374151);line-height:var(--ah-line-height-normal, 1.5)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ah-space-2, 0.5rem);width:100%;padding:var(--ah-btn-padding-y, 0.875rem) var(--ah-btn-padding-x, 1.5rem);font-size:var(--ah-font-size-base, 1rem);font-weight:var(--ah-btn-font-weight, 500);font-family:inherit;line-height:var(--ah-line-height-tight, 1.25);text-align:center;text-decoration:none;border:none;border-radius:var(--ah-btn-radius, 8px);cursor:pointer;transition:background-color var(--ah-transition-base, 200ms ease),               transform var(--ah-transition-fast, 150ms ease),               box-shadow var(--ah-transition-base, 200ms ease)}.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-primary, #0066cc);outline-offset:2px}.btn-primary{background-color:var(--ah-color-primary, #0066cc);color:var(--ah-color-text-on-primary, #ffffff)}.btn-primary:not(:disabled):hover{background-color:var(--ah-color-primary-hover, #0052a3)}.btn-secondary{background-color:var(--ah-color-bg, #ffffff);color:var(--ah-color-text, #374151);border:1px solid var(--ah-color-border-muted, #e5e7eb)}.btn-secondary:not(:disabled):hover{background-color:var(--ah-color-bg-muted, #f9fafb);border-color:var(--ah-color-border, #d1d5db)}.text-title{font-size:var(--ah-font-size-xl, 1.25rem);font-weight:var(--ah-font-weight-semibold, 600);color:var(--ah-color-text, #1f2937);margin:var(--ah-space-2, 0.5rem) 0;line-height:var(--ah-line-height-tight, 1.25)}.text-title.text-success{color:var(--ah-color-success, #16a34a)}.text-description{font-size:var(--ah-font-size-sm, 0.875rem);color:var(--ah-color-text-muted, #6b7280);margin:var(--ah-space-1, 0.25rem) 0;line-height:var(--ah-line-height-normal, 1.5)}.image{display:block;max-width:100%;height:auto;border-radius:var(--ah-radius-lg, 8px)}.image-centered{margin:0 auto var(--ah-space-4, 1rem);width:var(--ah-logo-size, 48px);height:var(--ah-logo-size, 48px);object-fit:contain}.link{color:var(--ah-color-primary, #0066cc);text-decoration:none;font-size:var(--ah-font-size-sm, 0.875rem);transition:color var(--ah-transition-fast, 150ms ease)}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid var(--ah-color-primary, #0066cc);outline-offset:2px}.node-error{padding:var(--ah-space-3, 0.75rem) var(--ah-space-4, 1rem);background-color:var(--ah-color-error-bg, #fee2e2);color:var(--ah-color-error, #dc2626);border:1px solid var(--ah-color-error-border, #fecaca);border-radius:var(--ah-radius-md, 6px);font-size:var(--ah-font-size-sm, 0.875rem)}.node-success{padding:var(--ah-space-3, 0.75rem) var(--ah-space-4, 1rem);background-color:var(--ah-color-success-bg, #dcfce7);color:var(--ah-color-success, #16a34a);border:1px solid var(--ah-color-success-border, #bbf7d0);border-radius:var(--ah-radius-md, 6px);font-size:var(--ah-font-size-sm, 0.875rem)}.divider{display:flex;align-items:center;text-align:center;margin:var(--ah-space-4, 1rem) 0}.divider::before,.divider::after{content:'';flex:1;border-bottom:1px solid var(--ah-color-border-muted, #e5e7eb)}.divider-text{padding:0 var(--ah-space-4, 1rem);font-size:var(--ah-font-size-sm, 0.875rem);color:var(--ah-color-text-muted, #9ca3af);text-transform:uppercase;letter-spacing:0.05em}"}},[513,"authhero-node",{component:[16],value:[1],disabled:[4]}]);function o(){"undefined"!=typeof customElements&&["authhero-node"].forEach((r=>{"authhero-node"===r&&(customElements.get(e(r))||customElements.define(e(r),s))}))}o();export{s as A,o as d}

package/dist/esm/app-globals-DQuL1Twl.js

@@ -0,0 +1,3 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };

package/dist/esm/authhero-node.entry.js

@@ -0,0 +1,253 @@
+import { r as registerInstance, c as createEvent, h } from './index-Doiemx6o.js';
+
+const authheroNodeCss = () => `:host{display:block}.input-wrapper{display:flex;flex-direction:column;gap:var(--ah-space-1, 0.25rem)}.input-label{font-size:var(--ah-font-size-sm, 0.875rem);font-weight:var(--ah-font-weight-medium, 500);color:var(--ah-color-text-label, #374151);line-height:var(--ah-line-height-normal, 1.5)}.required{color:var(--ah-color-error, #dc2626);margin-left:var(--ah-space-1, 0.25rem)}.input-field{padding:var(--ah-input-padding-y, 0.75rem) var(--ah-input-padding-x, 1rem);font-size:var(--ah-font-size-base, 1rem);font-family:inherit;color:var(--ah-color-text, #1f2937);background-color:var(--ah-color-bg, #ffffff);border:var(--ah-input-border-width, 1px) solid var(--ah-color-border, #d1d5db);border-radius:var(--ah-input-radius, 6px);outline:none;transition:border-color var(--ah-transition-base, 200ms ease),               box-shadow var(--ah-transition-base, 200ms ease)}.input-field::placeholder{color:var(--ah-color-text-muted, #9ca3af)}.input-field:focus{border-color:var(--ah-color-primary, #0066cc);box-shadow:0 0 0 3px var(--ah-color-primary-focus-ring, rgba(0, 102, 204, 0.1))}.input-field.has-error{border-color:var(--ah-color-error, #dc2626)}.input-field.has-error:focus{box-shadow:0 0 0 3px rgba(220, 38, 38, 0.1)}.input-field:disabled{background-color:var(--ah-color-bg-disabled, #f3f4f6);cursor:not-allowed;opacity:0.7}.error-text{font-size:var(--ah-font-size-xs, 0.75rem);color:var(--ah-color-error, #dc2626);margin-top:var(--ah-space-1, 0.25rem)}.helper-text{font-size:var(--ah-font-size-xs, 0.75rem);color:var(--ah-color-text-muted, #6b7280);margin-top:var(--ah-space-1, 0.25rem)}.checkbox-wrapper{display:flex;align-items:flex-start;gap:var(--ah-space-2, 0.5rem);cursor:pointer}.checkbox-wrapper input[type='checkbox']{width:1rem;height:1rem;margin-top:0.125rem;accent-color:var(--ah-color-primary, #0066cc);cursor:pointer}.checkbox-label{font-size:var(--ah-font-size-sm, 0.875rem);color:var(--ah-color-text-label, #374151);line-height:var(--ah-line-height-normal, 1.5)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ah-space-2, 0.5rem);width:100%;padding:var(--ah-btn-padding-y, 0.875rem) var(--ah-btn-padding-x, 1.5rem);font-size:var(--ah-font-size-base, 1rem);font-weight:var(--ah-btn-font-weight, 500);font-family:inherit;line-height:var(--ah-line-height-tight, 1.25);text-align:center;text-decoration:none;border:none;border-radius:var(--ah-btn-radius, 8px);cursor:pointer;transition:background-color var(--ah-transition-base, 200ms ease),               transform var(--ah-transition-fast, 150ms ease),               box-shadow var(--ah-transition-base, 200ms ease)}.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-primary, #0066cc);outline-offset:2px}.btn-primary{background-color:var(--ah-color-primary, #0066cc);color:var(--ah-color-text-on-primary, #ffffff)}.btn-primary:not(:disabled):hover{background-color:var(--ah-color-primary-hover, #0052a3)}.btn-secondary{background-color:var(--ah-color-bg, #ffffff);color:var(--ah-color-text, #374151);border:1px solid var(--ah-color-border-muted, #e5e7eb)}.btn-secondary:not(:disabled):hover{background-color:var(--ah-color-bg-muted, #f9fafb);border-color:var(--ah-color-border, #d1d5db)}.text-title{font-size:var(--ah-font-size-xl, 1.25rem);font-weight:var(--ah-font-weight-semibold, 600);color:var(--ah-color-text, #1f2937);margin:var(--ah-space-2, 0.5rem) 0;line-height:var(--ah-line-height-tight, 1.25)}.text-title.text-success{color:var(--ah-color-success, #16a34a)}.text-description{font-size:var(--ah-font-size-sm, 0.875rem);color:var(--ah-color-text-muted, #6b7280);margin:var(--ah-space-1, 0.25rem) 0;line-height:var(--ah-line-height-normal, 1.5)}.image{display:block;max-width:100%;height:auto;border-radius:var(--ah-radius-lg, 8px)}.image-centered{margin:0 auto var(--ah-space-4, 1rem);width:var(--ah-logo-size, 48px);height:var(--ah-logo-size, 48px);object-fit:contain}.link{color:var(--ah-color-primary, #0066cc);text-decoration:none;font-size:var(--ah-font-size-sm, 0.875rem);transition:color var(--ah-transition-fast, 150ms ease)}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid var(--ah-color-primary, #0066cc);outline-offset:2px}.node-error{padding:var(--ah-space-3, 0.75rem) var(--ah-space-4, 1rem);background-color:var(--ah-color-error-bg, #fee2e2);color:var(--ah-color-error, #dc2626);border:1px solid var(--ah-color-error-border, #fecaca);border-radius:var(--ah-radius-md, 6px);font-size:var(--ah-font-size-sm, 0.875rem)}.node-success{padding:var(--ah-space-3, 0.75rem) var(--ah-space-4, 1rem);background-color:var(--ah-color-success-bg, #dcfce7);color:var(--ah-color-success, #16a34a);border:1px solid var(--ah-color-success-border, #bbf7d0);border-radius:var(--ah-radius-md, 6px);font-size:var(--ah-font-size-sm, 0.875rem)}.divider{display:flex;align-items:center;text-align:center;margin:var(--ah-space-4, 1rem) 0}.divider::before,.divider::after{content:'';flex:1;border-bottom:1px solid var(--ah-color-border-muted, #e5e7eb)}.divider-text{padding:0 var(--ah-space-4, 1rem);font-size:var(--ah-font-size-sm, 0.875rem);color:var(--ah-color-text-muted, #9ca3af);text-transform:uppercase;letter-spacing:0.05em}`;
+
+const AuthheroNode = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.fieldChange = createEvent(this, "fieldChange");
+        this.buttonClick = createEvent(this, "buttonClick");
+    }
+    /**
+     * The component configuration to render.
+     * Follows Auth0 Forms component schema.
+     */
+    component;
+    /**
+     * Current value for field components.
+     */
+    value;
+    /**
+     * Whether the component is disabled.
+     */
+    disabled = false;
+    /**
+     * Emitted when a field value changes.
+     */
+    fieldChange;
+    /**
+     * Emitted when a button is clicked.
+     */
+    buttonClick;
+    handleInput = (e) => {
+        const target = e.target;
+        this.fieldChange.emit({ id: this.component.id, value: target.value });
+    };
+    handleCheckbox = (e) => {
+        const target = e.target;
+        this.fieldChange.emit({
+            id: this.component.id,
+            value: target.checked ? "true" : "false",
+        });
+    };
+    handleButtonClick = (e, type, value) => {
+        if (type !== "submit") {
+            e.preventDefault();
+        }
+        this.buttonClick.emit({ id: this.component.id, type, value });
+    };
+    /**
+     * Get error messages from the component.
+     */
+    getErrors() {
+        const runtimeComp = this.component;
+        return (runtimeComp.messages?.filter((m) => m.type === "error") || []);
+    }
+    /**
+     * Render a label for a field.
+     */
+    renderLabel(text, inputId, required) {
+        if (!text)
+            return null;
+        return (h("label", { class: "input-label", part: "label", htmlFor: inputId }, text, required && h("span", { class: "required" }, "*")));
+    }
+    /**
+     * Render error messages.
+     */
+    renderErrors() {
+        const errors = this.getErrors();
+        return errors.map((err) => (h("span", { class: "error-text", part: "error-text", key: err.id ?? err.text }, err.text)));
+    }
+    /**
+     * Render hint text.
+     */
+    renderHint(hint) {
+        if (!hint)
+            return null;
+        return (h("span", { class: "helper-text", part: "helper-text" }, hint));
+    }
+    // ===========================================================================
+    // BLOCK Component Renderers
+    // ===========================================================================
+    renderDivider() {
+        return h("hr", { class: "divider", part: "divider" });
+    }
+    renderHtml(component) {
+        return (h("div", { class: "html-content", part: "html-content", innerHTML: component.config?.content ?? "" }));
+    }
+    renderImage(component) {
+        const { src, alt, width, height } = component.config ?? {};
+        if (!src)
+            return null;
+        return (h("img", { class: "image", part: "image", src: src, alt: alt ?? "", width: width, height: height, loading: "lazy" }));
+    }
+    renderRichText(component) {
+        return (h("div", { class: "rich-text", part: "rich-text", innerHTML: component.config?.content ?? "" }));
+    }
+    renderNextButton(component) {
+        return (h("button", { type: "submit", class: "btn btn-primary", part: "button button-primary", disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "submit", "next") }, component.config.text ?? "Continue"));
+    }
+    renderPreviousButton(component) {
+        return (h("button", { type: "button", class: "btn btn-secondary", part: "button button-secondary", disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "previous", "back") }, component.config.text ?? "Back"));
+    }
+    renderJumpButton(component) {
+        return (h("button", { type: "button", class: "btn btn-link", part: "button button-link", disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "jump", component.config.target_step) }, component.config.text ?? "Go"));
+    }
+    renderResendButton(component) {
+        return (h("button", { type: "button", class: "btn btn-link", part: "button button-link", disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "resend", component.config.resend_action) }, component.config.text ?? "Resend"));
+    }
+    // ===========================================================================
+    // FIELD Component Renderers
+    // ===========================================================================
+    renderTextField(component) {
+        const inputId = `input-${component.id}`;
+        const errors = this.getErrors();
+        const { placeholder, multiline, max_length } = component.config ?? {};
+        if (multiline) {
+            return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("textarea", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input textarea", name: component.id, placeholder: placeholder, required: component.required, disabled: this.disabled, maxLength: max_length, onInput: this.handleInput }, this.value ?? ""), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+        }
+        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: component.sensitive ? "password" : "text", name: component.id, value: this.value ?? "", placeholder: placeholder, required: component.required, disabled: this.disabled, maxLength: max_length, onInput: this.handleInput }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+    }
+    renderEmailField(component) {
+        const inputId = `input-${component.id}`;
+        const errors = this.getErrors();
+        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: "email", name: component.id, value: this.value ?? "", placeholder: component.config?.placeholder, required: component.required, disabled: this.disabled, autocomplete: "email", onInput: this.handleInput }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+    }
+    renderPasswordField(component) {
+        const inputId = `input-${component.id}`;
+        const errors = this.getErrors();
+        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: "password", name: component.id, value: this.value ?? "", placeholder: component.config?.placeholder, required: component.required, disabled: this.disabled, minLength: component.config?.min_length, autocomplete: "current-password", onInput: this.handleInput }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+    }
+    renderNumberField(component) {
+        const inputId = `input-${component.id}`;
+        const errors = this.getErrors();
+        const { placeholder, min, max, step } = component.config ?? {};
+        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: "number", name: component.id, value: this.value ?? "", placeholder: placeholder, required: component.required, disabled: this.disabled, min: min, max: max, step: step, onInput: this.handleInput }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+    }
+    renderTelField(component) {
+        const inputId = `input-${component.id}`;
+        const errors = this.getErrors();
+        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: "tel", name: component.id, value: this.value ?? "", placeholder: component.config?.placeholder, required: component.required, disabled: this.disabled, autocomplete: "tel", onInput: this.handleInput }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+    }
+    renderUrlField(component) {
+        const inputId = `input-${component.id}`;
+        const errors = this.getErrors();
+        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: "url", name: component.id, value: this.value ?? "", placeholder: component.config?.placeholder, required: component.required, disabled: this.disabled, onInput: this.handleInput }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+    }
+    renderDateField(component) {
+        const inputId = `input-${component.id}`;
+        const errors = this.getErrors();
+        const { min, max } = component.config ?? {};
+        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: "date", name: component.id, value: this.value ?? "", required: component.required, disabled: this.disabled, min: min, max: max, onInput: this.handleInput }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+    }
+    renderBooleanField(component) {
+        return (h("label", { class: "checkbox-wrapper", part: "checkbox-wrapper" }, h("input", { type: "checkbox", part: "checkbox", name: component.id, checked: this.value === "true" || component.config?.default_value === true, required: component.required, disabled: this.disabled, onChange: this.handleCheckbox }), h("span", { class: "checkbox-label", part: "checkbox-label" }, component.label)));
+    }
+    renderLegalField(component) {
+        const text = component.config?.text ?? component.label ?? "";
+        const isHtml = component.config?.html === true;
+        return (h("label", { class: "checkbox-wrapper", part: "checkbox-wrapper" }, h("input", { type: "checkbox", part: "checkbox", name: component.id, checked: this.value === "true", required: component.required, disabled: this.disabled, onChange: this.handleCheckbox }), isHtml ? (h("span", { class: "checkbox-label", part: "checkbox-label", innerHTML: text })) : (h("span", { class: "checkbox-label", part: "checkbox-label" }, text))));
+    }
+    renderDropdownField(component) {
+        const inputId = `input-${component.id}`;
+        const errors = this.getErrors();
+        const { options, placeholder } = component.config ?? {};
+        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("select", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input select", name: component.id, required: component.required, disabled: this.disabled, onChange: this.handleInput }, placeholder && (h("option", { value: "", disabled: true, selected: !this.value }, placeholder)), options?.map((opt) => (h("option", { value: opt.value, selected: this.value === opt.value, key: opt.value }, opt.label)))), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+    }
+    renderChoiceField(component) {
+        const errors = this.getErrors();
+        const { options, display } = component.config ?? {};
+        const isCheckbox = display === "checkbox";
+        const inputType = isCheckbox ? "checkbox" : "radio";
+        return (h("div", { class: "choice-wrapper", part: "choice-wrapper" }, component.label && (h("span", { class: "choice-label", part: "choice-label" }, component.label, component.required && h("span", { class: "required" }, "*"))), h("div", { class: "choice-options", part: "choice-options" }, options?.map((opt) => (h("label", { class: "choice-option", part: "choice-option", key: opt.value }, h("input", { type: inputType, part: inputType, name: component.id, value: opt.value, checked: this.value === opt.value, required: component.required && !isCheckbox, disabled: this.disabled, onChange: this.handleInput }), h("span", null, opt.label))))), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+    }
+    renderSocialField(component) {
+        const providers = component.config?.providers ?? [];
+        return (h("div", { class: "social-buttons", part: "social-buttons" }, providers.map((provider) => (h("button", { type: "button", class: "btn btn-secondary btn-social", part: "button button-secondary button-social", "data-provider": provider, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "social", provider), key: provider }, "Continue with ", provider.charAt(0).toUpperCase() + provider.slice(1))))));
+    }
+    // ===========================================================================
+    // Main Render
+    // ===========================================================================
+    render() {
+        if (!this.component) {
+            return null;
+        }
+        // Hidden components
+        if (this.component.visible === false) {
+            return null;
+        }
+        switch (this.component.type) {
+            // BLOCK components
+            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);
+            // FIELD components
+            case "TEXT":
+                return this.renderTextField(this.component);
+            case "EMAIL":
+                return this.renderEmailField(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 "DROPDOWN":
+                return this.renderDropdownField(this.component);
+            case "CHOICE":
+                return this.renderChoiceField(this.component);
+            case "SOCIAL":
+                return this.renderSocialField(this.component);
+            // WIDGET components (not yet implemented)
+            case "AUTH0_VERIFIABLE_CREDENTIALS":
+            case "GMAPS_ADDRESS":
+            case "RECAPTCHA":
+                console.warn(`Widget component "${this.component.type}" not yet implemented`);
+                return null;
+            // Other FIELD components (not yet implemented)
+            case "CARDS":
+            case "CUSTOM":
+            case "FILE":
+            case "PAYMENT":
+                console.warn(`Component "${this.component.type}" not yet implemented`);
+                return null;
+            default:
+                console.warn(`Unknown component type: ${this.component.type}`);
+                return null;
+        }
+    }
+};
+AuthheroNode.style = authheroNodeCss();
+
+export { AuthheroNode as authhero_node };