@authhero/widget 0.13.2 → 0.14.0
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.
- package/dist/authhero-widget/authhero-widget.esm.js +1 -1
- package/dist/authhero-widget/index.esm.js +1 -1
- package/dist/authhero-widget/p-5e699de4.entry.js +1 -0
- package/dist/cjs/authhero-node.cjs.entry.js +24 -11
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/collection/components/authhero-node/authhero-node.css +4 -1
- package/dist/collection/components/authhero-node/authhero-node.js +23 -10
- package/dist/components/authhero-node.js +1 -1
- package/dist/components/authhero-widget.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/p-CHIjqNof.js +1 -0
- package/dist/esm/authhero-node.entry.js +24 -11
- package/dist/esm/index.js +1 -1
- package/dist/types/components/authhero-node/authhero-node.d.ts +5 -0
- package/hydrate/index.js +24 -11
- package/hydrate/index.mjs +24 -11
- package/package.json +2 -2
- package/dist/authhero-widget/p-b2d3d319.entry.js +0 -1
- package/dist/components/p-CWVARG2s.js +0 -1
package/hydrate/index.js
CHANGED
|
@@ -4947,7 +4947,7 @@ var setScopedSSR = (opts) => {
|
|
|
4947
4947
|
var needsScopedSSR = () => scopedSSR;
|
|
4948
4948
|
var scopedSSR = false;
|
|
4949
4949
|
|
|
4950
|
-
const authheroNodeCss = () => `:host{display:block}.input-wrapper{display:flex;flex-direction:column;position:relative;margin-bottom:16px}.input-container{position:relative;width:100%}.input-label{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size: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{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-text, #1e212a);background-color:var(--ah-color-input-bg, #ffffff);border:1px solid var(--ah-color-border, #c9cace);border-radius:var(--ah-input-radius, 3px);outline:none;transition:border-color 0.15s ease-out,\\n 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-text-muted, #65676e);transition:color 0.15s ease}.password-toggle:hover{color: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: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:14px;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: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,\\n border-color 0.15s ease,\\n 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-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{filter:brightness(0.85)}.btn-secondary{background-color:var(--ah-color-bg, #ffffff);color:var(--ah-color-text, #1e212a);border:1px solid 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}.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:20px;font-weight:400;color:var(--ah-color-text, #1e212a);margin:8px 0;line-height:1.3}.text-title.text-success{color:var(--ah-color-success, #13a769)}.text-description{font-size:14px;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:14px;transition:color 0.15s ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid 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:14px;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 .signup-link{margin-top:16px;text-align:center;font-size:14px;color:var(--ah-color-text, #1e212a)}`;
|
|
4950
|
+
const authheroNodeCss = () => `:host{display:block}.input-wrapper{display:flex;flex-direction:column;position:relative;margin-bottom:16px}.input-container{position:relative;width:100%}.input-label{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size: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-text, #1e212a);background-color:var(--ah-color-input-bg, #ffffff);border:1px solid var(--ah-color-border, #c9cace);border-radius:var(--ah-input-radius, 3px);outline:none;transition:border-color 0.15s ease-out,\\n 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-text-muted, #65676e);transition:color 0.15s ease}.password-toggle:hover{color: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: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:14px;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: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,\\n border-color 0.15s ease,\\n 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-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{filter:brightness(0.85)}.btn-secondary{background-color:var(--ah-color-bg, #ffffff);color:var(--ah-color-text, #1e212a);border:1px solid 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}.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:20px;font-weight:400;color:var(--ah-color-text, #1e212a);margin:8px 0;line-height:1.3}.text-title.text-success{color:var(--ah-color-success, #13a769)}.text-description{font-size:14px;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:14px;transition:color 0.15s ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid 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:14px;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 .signup-link{margin-top:16px;text-align:center;font-size:14px;color:var(--ah-color-text, #1e212a)}`;
|
|
4951
4951
|
|
|
4952
4952
|
class AuthheroNode {
|
|
4953
4953
|
constructor(hostRef) {
|
|
@@ -5030,7 +5030,9 @@ class AuthheroNode {
|
|
|
5030
5030
|
renderFloatingLabel(text, inputId, required, hasValue) {
|
|
5031
5031
|
if (!text)
|
|
5032
5032
|
return null;
|
|
5033
|
-
|
|
5033
|
+
// Use string class instead of object to avoid hydration mismatch
|
|
5034
|
+
const labelClass = hasValue ? "input-label floating" : "input-label";
|
|
5035
|
+
return (hAsync("label", { class: labelClass, part: "label", htmlFor: inputId }, text, required && hAsync("span", { class: "required" }, "*")));
|
|
5034
5036
|
}
|
|
5035
5037
|
/**
|
|
5036
5038
|
* Render a label for a field (non-floating version for checkboxes etc).
|
|
@@ -5040,6 +5042,13 @@ class AuthheroNode {
|
|
|
5040
5042
|
return null;
|
|
5041
5043
|
return (hAsync("label", { class: "input-label", part: "label", htmlFor: inputId }, text, required && hAsync("span", { class: "required" }, "*")));
|
|
5042
5044
|
}
|
|
5045
|
+
/**
|
|
5046
|
+
* Get the input field class string.
|
|
5047
|
+
* Uses string instead of object to avoid hydration mismatch.
|
|
5048
|
+
*/
|
|
5049
|
+
getInputFieldClass(hasError) {
|
|
5050
|
+
return hasError ? "input-field has-error" : "input-field";
|
|
5051
|
+
}
|
|
5043
5052
|
/**
|
|
5044
5053
|
* Render the eye icon for password visibility toggle.
|
|
5045
5054
|
*/
|
|
@@ -5105,44 +5114,46 @@ class AuthheroNode {
|
|
|
5105
5114
|
const { multiline, max_length } = component.config ?? {};
|
|
5106
5115
|
const hasValue = !!(this.value && this.value.length > 0);
|
|
5107
5116
|
if (multiline) {
|
|
5108
|
-
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), hAsync("textarea", { id: inputId, class:
|
|
5117
|
+
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), hAsync("textarea", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input textarea", name: component.id, placeholder: " ", required: component.required, disabled: this.disabled, maxLength: max_length, onInput: this.handleInput }, this.value ?? ""), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
|
|
5109
5118
|
}
|
|
5110
|
-
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: "input-container" }, hAsync("input", { id: inputId, class:
|
|
5119
|
+
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: "input-container" }, hAsync("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: this.value ?? "", placeholder: " ", required: component.required, disabled: this.disabled, maxLength: max_length, onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
|
|
5111
5120
|
}
|
|
5112
5121
|
renderEmailField(component) {
|
|
5113
5122
|
const inputId = `input-${component.id}`;
|
|
5114
5123
|
const errors = this.getErrors();
|
|
5115
5124
|
const hasValue = !!(this.value && this.value.length > 0);
|
|
5116
|
-
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: "input-container" }, hAsync("input", { id: inputId, class:
|
|
5125
|
+
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: "input-container" }, hAsync("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: "email", name: component.id, "data-input-name": component.id, value: this.value ?? "", placeholder: " ", required: component.required, disabled: this.disabled, autocomplete: "email", onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
|
|
5117
5126
|
}
|
|
5118
5127
|
renderPasswordField(component) {
|
|
5119
5128
|
const inputId = `input-${component.id}`;
|
|
5120
5129
|
const errors = this.getErrors();
|
|
5121
5130
|
const hasValue = !!(this.value && this.value.length > 0);
|
|
5122
5131
|
const forgotPasswordLink = component.config?.forgot_password_link;
|
|
5123
|
-
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: "input-container password-container" }, hAsync("input", { id: inputId, class:
|
|
5132
|
+
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: "input-container password-container" }, hAsync("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: this.passwordVisible ? "text" : "password", name: component.id, "data-input-name": component.id, value: this.value ?? "", placeholder: " ", required: component.required, disabled: this.disabled, minLength: component.config?.min_length, autocomplete: "current-password", onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue), hAsync("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(), errors.length === 0 && this.renderHint(component.hint), forgotPasswordLink && (hAsync("div", { class: "field-link", part: "field-link" }, hAsync("a", { href: forgotPasswordLink, class: "link", part: "link" }, "Forgot password?")))));
|
|
5124
5133
|
}
|
|
5125
5134
|
renderNumberField(component) {
|
|
5126
5135
|
const inputId = `input-${component.id}`;
|
|
5127
5136
|
const errors = this.getErrors();
|
|
5128
5137
|
const { placeholder, min, max, step } = component.config ?? {};
|
|
5129
|
-
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), hAsync("input", { id: inputId, class:
|
|
5138
|
+
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), hAsync("input", { id: inputId, class: this.getInputFieldClass(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, onKeyDown: this.handleKeyDown }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
|
|
5130
5139
|
}
|
|
5131
5140
|
renderTelField(component) {
|
|
5132
5141
|
const inputId = `input-${component.id}`;
|
|
5133
5142
|
const errors = this.getErrors();
|
|
5134
|
-
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), hAsync("input", { id: inputId, class:
|
|
5143
|
+
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), hAsync("input", { id: inputId, class: this.getInputFieldClass(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, onKeyDown: this.handleKeyDown }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
|
|
5135
5144
|
}
|
|
5136
5145
|
renderUrlField(component) {
|
|
5137
5146
|
const inputId = `input-${component.id}`;
|
|
5138
5147
|
const errors = this.getErrors();
|
|
5139
|
-
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), hAsync("input", { id: inputId, class:
|
|
5148
|
+
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), hAsync("input", { id: inputId, class: this.getInputFieldClass(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, onKeyDown: this.handleKeyDown }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
|
|
5140
5149
|
}
|
|
5141
5150
|
renderDateField(component) {
|
|
5142
5151
|
const inputId = `input-${component.id}`;
|
|
5143
5152
|
const errors = this.getErrors();
|
|
5144
5153
|
const { min, max } = component.config ?? {};
|
|
5145
|
-
|
|
5154
|
+
// Date fields always have a value (even if placeholder format), so always float the label
|
|
5155
|
+
const hasValue = true;
|
|
5156
|
+
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: "input-container" }, hAsync("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: "date", name: component.id, "data-input-name": component.id, value: this.value ?? "", placeholder: " ", required: component.required, disabled: this.disabled, min: min, max: max, onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
|
|
5146
5157
|
}
|
|
5147
5158
|
renderBooleanField(component) {
|
|
5148
5159
|
return (hAsync("label", { class: "checkbox-wrapper", part: "checkbox-wrapper" }, hAsync("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 }), hAsync("span", { class: "checkbox-label", part: "checkbox-label" }, component.label)));
|
|
@@ -5156,7 +5167,9 @@ class AuthheroNode {
|
|
|
5156
5167
|
const inputId = `input-${component.id}`;
|
|
5157
5168
|
const errors = this.getErrors();
|
|
5158
5169
|
const { options, placeholder } = component.config ?? {};
|
|
5159
|
-
|
|
5170
|
+
// Dropdown always has visual content (selected option), so always float the label
|
|
5171
|
+
const hasValue = true;
|
|
5172
|
+
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: "input-container" }, hAsync("select", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input select", name: component.id, required: component.required, disabled: this.disabled, onChange: this.handleInput }, placeholder && (hAsync("option", { value: "", disabled: true, selected: !this.value }, placeholder)), options?.map((opt) => (hAsync("option", { value: opt.value, selected: this.value === opt.value, key: opt.value }, opt.label)))), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
|
|
5160
5173
|
}
|
|
5161
5174
|
renderChoiceField(component) {
|
|
5162
5175
|
const errors = this.getErrors();
|
package/hydrate/index.mjs
CHANGED
|
@@ -4945,7 +4945,7 @@ var setScopedSSR = (opts) => {
|
|
|
4945
4945
|
var needsScopedSSR = () => scopedSSR;
|
|
4946
4946
|
var scopedSSR = false;
|
|
4947
4947
|
|
|
4948
|
-
const authheroNodeCss = () => `:host{display:block}.input-wrapper{display:flex;flex-direction:column;position:relative;margin-bottom:16px}.input-container{position:relative;width:100%}.input-label{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size: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{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-text, #1e212a);background-color:var(--ah-color-input-bg, #ffffff);border:1px solid var(--ah-color-border, #c9cace);border-radius:var(--ah-input-radius, 3px);outline:none;transition:border-color 0.15s ease-out,\\n 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-text-muted, #65676e);transition:color 0.15s ease}.password-toggle:hover{color: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: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:14px;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: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,\\n border-color 0.15s ease,\\n 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-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{filter:brightness(0.85)}.btn-secondary{background-color:var(--ah-color-bg, #ffffff);color:var(--ah-color-text, #1e212a);border:1px solid 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}.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:20px;font-weight:400;color:var(--ah-color-text, #1e212a);margin:8px 0;line-height:1.3}.text-title.text-success{color:var(--ah-color-success, #13a769)}.text-description{font-size:14px;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:14px;transition:color 0.15s ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid 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:14px;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 .signup-link{margin-top:16px;text-align:center;font-size:14px;color:var(--ah-color-text, #1e212a)}`;
|
|
4948
|
+
const authheroNodeCss = () => `:host{display:block}.input-wrapper{display:flex;flex-direction:column;position:relative;margin-bottom:16px}.input-container{position:relative;width:100%}.input-label{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size: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-text, #1e212a);background-color:var(--ah-color-input-bg, #ffffff);border:1px solid var(--ah-color-border, #c9cace);border-radius:var(--ah-input-radius, 3px);outline:none;transition:border-color 0.15s ease-out,\\n 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-text-muted, #65676e);transition:color 0.15s ease}.password-toggle:hover{color: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: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:14px;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: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,\\n border-color 0.15s ease,\\n 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-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{filter:brightness(0.85)}.btn-secondary{background-color:var(--ah-color-bg, #ffffff);color:var(--ah-color-text, #1e212a);border:1px solid 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}.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:20px;font-weight:400;color:var(--ah-color-text, #1e212a);margin:8px 0;line-height:1.3}.text-title.text-success{color:var(--ah-color-success, #13a769)}.text-description{font-size:14px;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:14px;transition:color 0.15s ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid 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:14px;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 .signup-link{margin-top:16px;text-align:center;font-size:14px;color:var(--ah-color-text, #1e212a)}`;
|
|
4949
4949
|
|
|
4950
4950
|
class AuthheroNode {
|
|
4951
4951
|
constructor(hostRef) {
|
|
@@ -5028,7 +5028,9 @@ class AuthheroNode {
|
|
|
5028
5028
|
renderFloatingLabel(text, inputId, required, hasValue) {
|
|
5029
5029
|
if (!text)
|
|
5030
5030
|
return null;
|
|
5031
|
-
|
|
5031
|
+
// Use string class instead of object to avoid hydration mismatch
|
|
5032
|
+
const labelClass = hasValue ? "input-label floating" : "input-label";
|
|
5033
|
+
return (hAsync("label", { class: labelClass, part: "label", htmlFor: inputId }, text, required && hAsync("span", { class: "required" }, "*")));
|
|
5032
5034
|
}
|
|
5033
5035
|
/**
|
|
5034
5036
|
* Render a label for a field (non-floating version for checkboxes etc).
|
|
@@ -5038,6 +5040,13 @@ class AuthheroNode {
|
|
|
5038
5040
|
return null;
|
|
5039
5041
|
return (hAsync("label", { class: "input-label", part: "label", htmlFor: inputId }, text, required && hAsync("span", { class: "required" }, "*")));
|
|
5040
5042
|
}
|
|
5043
|
+
/**
|
|
5044
|
+
* Get the input field class string.
|
|
5045
|
+
* Uses string instead of object to avoid hydration mismatch.
|
|
5046
|
+
*/
|
|
5047
|
+
getInputFieldClass(hasError) {
|
|
5048
|
+
return hasError ? "input-field has-error" : "input-field";
|
|
5049
|
+
}
|
|
5041
5050
|
/**
|
|
5042
5051
|
* Render the eye icon for password visibility toggle.
|
|
5043
5052
|
*/
|
|
@@ -5103,44 +5112,46 @@ class AuthheroNode {
|
|
|
5103
5112
|
const { multiline, max_length } = component.config ?? {};
|
|
5104
5113
|
const hasValue = !!(this.value && this.value.length > 0);
|
|
5105
5114
|
if (multiline) {
|
|
5106
|
-
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), hAsync("textarea", { id: inputId, class:
|
|
5115
|
+
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), hAsync("textarea", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input textarea", name: component.id, placeholder: " ", required: component.required, disabled: this.disabled, maxLength: max_length, onInput: this.handleInput }, this.value ?? ""), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
|
|
5107
5116
|
}
|
|
5108
|
-
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: "input-container" }, hAsync("input", { id: inputId, class:
|
|
5117
|
+
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: "input-container" }, hAsync("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: this.value ?? "", placeholder: " ", required: component.required, disabled: this.disabled, maxLength: max_length, onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
|
|
5109
5118
|
}
|
|
5110
5119
|
renderEmailField(component) {
|
|
5111
5120
|
const inputId = `input-${component.id}`;
|
|
5112
5121
|
const errors = this.getErrors();
|
|
5113
5122
|
const hasValue = !!(this.value && this.value.length > 0);
|
|
5114
|
-
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: "input-container" }, hAsync("input", { id: inputId, class:
|
|
5123
|
+
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: "input-container" }, hAsync("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: "email", name: component.id, "data-input-name": component.id, value: this.value ?? "", placeholder: " ", required: component.required, disabled: this.disabled, autocomplete: "email", onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
|
|
5115
5124
|
}
|
|
5116
5125
|
renderPasswordField(component) {
|
|
5117
5126
|
const inputId = `input-${component.id}`;
|
|
5118
5127
|
const errors = this.getErrors();
|
|
5119
5128
|
const hasValue = !!(this.value && this.value.length > 0);
|
|
5120
5129
|
const forgotPasswordLink = component.config?.forgot_password_link;
|
|
5121
|
-
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: "input-container password-container" }, hAsync("input", { id: inputId, class:
|
|
5130
|
+
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: "input-container password-container" }, hAsync("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: this.passwordVisible ? "text" : "password", name: component.id, "data-input-name": component.id, value: this.value ?? "", placeholder: " ", required: component.required, disabled: this.disabled, minLength: component.config?.min_length, autocomplete: "current-password", onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue), hAsync("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(), errors.length === 0 && this.renderHint(component.hint), forgotPasswordLink && (hAsync("div", { class: "field-link", part: "field-link" }, hAsync("a", { href: forgotPasswordLink, class: "link", part: "link" }, "Forgot password?")))));
|
|
5122
5131
|
}
|
|
5123
5132
|
renderNumberField(component) {
|
|
5124
5133
|
const inputId = `input-${component.id}`;
|
|
5125
5134
|
const errors = this.getErrors();
|
|
5126
5135
|
const { placeholder, min, max, step } = component.config ?? {};
|
|
5127
|
-
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), hAsync("input", { id: inputId, class:
|
|
5136
|
+
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), hAsync("input", { id: inputId, class: this.getInputFieldClass(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, onKeyDown: this.handleKeyDown }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
|
|
5128
5137
|
}
|
|
5129
5138
|
renderTelField(component) {
|
|
5130
5139
|
const inputId = `input-${component.id}`;
|
|
5131
5140
|
const errors = this.getErrors();
|
|
5132
|
-
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), hAsync("input", { id: inputId, class:
|
|
5141
|
+
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), hAsync("input", { id: inputId, class: this.getInputFieldClass(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, onKeyDown: this.handleKeyDown }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
|
|
5133
5142
|
}
|
|
5134
5143
|
renderUrlField(component) {
|
|
5135
5144
|
const inputId = `input-${component.id}`;
|
|
5136
5145
|
const errors = this.getErrors();
|
|
5137
|
-
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), hAsync("input", { id: inputId, class:
|
|
5146
|
+
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), hAsync("input", { id: inputId, class: this.getInputFieldClass(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, onKeyDown: this.handleKeyDown }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
|
|
5138
5147
|
}
|
|
5139
5148
|
renderDateField(component) {
|
|
5140
5149
|
const inputId = `input-${component.id}`;
|
|
5141
5150
|
const errors = this.getErrors();
|
|
5142
5151
|
const { min, max } = component.config ?? {};
|
|
5143
|
-
|
|
5152
|
+
// Date fields always have a value (even if placeholder format), so always float the label
|
|
5153
|
+
const hasValue = true;
|
|
5154
|
+
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: "input-container" }, hAsync("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: "date", name: component.id, "data-input-name": component.id, value: this.value ?? "", placeholder: " ", required: component.required, disabled: this.disabled, min: min, max: max, onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
|
|
5144
5155
|
}
|
|
5145
5156
|
renderBooleanField(component) {
|
|
5146
5157
|
return (hAsync("label", { class: "checkbox-wrapper", part: "checkbox-wrapper" }, hAsync("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 }), hAsync("span", { class: "checkbox-label", part: "checkbox-label" }, component.label)));
|
|
@@ -5154,7 +5165,9 @@ class AuthheroNode {
|
|
|
5154
5165
|
const inputId = `input-${component.id}`;
|
|
5155
5166
|
const errors = this.getErrors();
|
|
5156
5167
|
const { options, placeholder } = component.config ?? {};
|
|
5157
|
-
|
|
5168
|
+
// Dropdown always has visual content (selected option), so always float the label
|
|
5169
|
+
const hasValue = true;
|
|
5170
|
+
return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: "input-container" }, hAsync("select", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input select", name: component.id, required: component.required, disabled: this.disabled, onChange: this.handleInput }, placeholder && (hAsync("option", { value: "", disabled: true, selected: !this.value }, placeholder)), options?.map((opt) => (hAsync("option", { value: opt.value, selected: this.value === opt.value, key: opt.value }, opt.label)))), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
|
|
5158
5171
|
}
|
|
5159
5172
|
renderChoiceField(component) {
|
|
5160
5173
|
const errors = this.getErrors();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@authhero/widget",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.14.0",
|
|
4
4
|
"description": "Server-Driven UI widget for AuthHero authentication flows",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
}
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@authhero/adapter-interfaces": "0.
|
|
40
|
+
"@authhero/adapter-interfaces": "0.134.0"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@hono/node-server": "^1.14.1",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as e,h as r}from"./p-5hZ8Vbm9.js";const i=class{constructor(r){t(this,r),this.fieldChange=e(this,"fieldChange"),this.buttonClick=e(this,"buttonClick")}component;value;disabled=!1;passwordVisible=!1;fieldChange;buttonClick;handleInput=t=>{this.fieldChange.emit({id:this.component.id,value:t.target.value})};handleKeyDown=t=>{"Enter"===t.key&&(t.preventDefault(),this.buttonClick.emit({id:"submit",type:"submit",value:"next"}))};handleCheckbox=t=>{this.fieldChange.emit({id:this.component.id,value:t.target.checked?"true":"false"})};sanitizeForCssToken(t){return t.toLowerCase().replace(/[^a-z0-9-]/g,"-").replace(/-+/g,"-").replace(/^-|-$/g,"")}handleButtonClick=(t,e,r)=>{t.preventDefault(),this.buttonClick.emit({id:this.component.id,type:e,value:r})};togglePasswordVisibility=()=>{this.passwordVisible=!this.passwordVisible};getErrors(){const t=this.component;return t.messages?.filter((t=>"error"===t.type))||[]}renderFloatingLabel(t,e,i,o){return t?r("label",{class:{"input-label":!0,floating:!!o},part:"label",htmlFor:e},t,i&&r("span",{class:"required"},"*")):null}renderLabel(t,e,i){return t?r("label",{class:"input-label",part:"label",htmlFor:e},t,i&&r("span",{class:"required"},"*")):null}renderPasswordToggle(){return this.passwordVisible?r("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"},r("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"}),r("line",{x1:"1",y1:"1",x2:"23",y2:"23"})):r("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"},r("path",{d:"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"}),r("circle",{cx:"12",cy:"12",r:"3"}))}renderErrors(){return this.getErrors().map((t=>r("span",{class:"error-text",part:"error-text",key:t.id??t.text},t.text)))}renderHint(t){return t?r("span",{class:"helper-text",part:"helper-text"},t):null}renderDivider(){return r("hr",{class:"divider",part:"divider"})}renderHtml(t){return r("div",{class:"html-content",part:"html-content",innerHTML:t.config?.content??""})}renderImage(t){const{src:e,alt:i,width:o,height:n}=t.config??{};return e?r("img",{class:"image",part:"image",src:e,alt:i??"",width:o,height:n,loading:"lazy"}):null}renderRichText(t){return r("div",{class:"rich-text",part:"rich-text",innerHTML:t.config?.content??""})}renderNextButton(t){return r("button",{type:"submit",class:"btn btn-primary",part:"button button-primary","data-primary-action-button":!0,disabled:this.disabled,onClick:t=>this.handleButtonClick(t,"submit","next")},t.config.text??"Continue")}renderPreviousButton(t){return r("button",{type:"button",class:"btn btn-secondary",part:"button button-secondary",disabled:this.disabled,onClick:t=>this.handleButtonClick(t,"previous","back")},t.config.text??"Back")}renderJumpButton(t){return r("button",{type:"button",class:"btn btn-link",part:"button button-link",disabled:this.disabled,onClick:e=>this.handleButtonClick(e,"jump",t.config.target_step)},t.config.text??"Go")}renderResendButton(t){return r("button",{type:"button",class:"btn btn-link",part:"button button-link",disabled:this.disabled,onClick:e=>this.handleButtonClick(e,"resend",t.config.resend_action)},t.config.text??"Resend")}renderTextField(t){const e=`input-${t.id}`,i=this.getErrors(),{multiline:o,max_length:n}=t.config??{},a=!!(this.value&&this.value.length>0);return o?r("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(t.label,e,t.required),r("textarea",{id:e,class:{"input-field":!0,"has-error":i.length>0},part:"input textarea",name:t.id,placeholder:" ",required:t.required,disabled:this.disabled,maxLength:n,onInput:this.handleInput},this.value??""),this.renderErrors(),0===i.length&&this.renderHint(t.hint)):r("div",{class:"input-wrapper",part:"input-wrapper"},r("div",{class:"input-container"},r("input",{id:e,class:{"input-field":!0,"has-error":i.length>0},part:"input",type:t.sensitive?"password":"text",name:t.id,"data-input-name":t.id,value:this.value??"",placeholder:" ",required:t.required,disabled:this.disabled,maxLength:n,onInput:this.handleInput,onKeyDown:this.handleKeyDown}),this.renderFloatingLabel(t.label,e,t.required,a)),this.renderErrors(),0===i.length&&this.renderHint(t.hint))}renderEmailField(t){const e=`input-${t.id}`,i=this.getErrors(),o=!!(this.value&&this.value.length>0);return r("div",{class:"input-wrapper",part:"input-wrapper"},r("div",{class:"input-container"},r("input",{id:e,class:{"input-field":!0,"has-error":i.length>0},part:"input",type:"email",name:t.id,"data-input-name":t.id,value:this.value??"",placeholder:" ",required:t.required,disabled:this.disabled,autocomplete:"email",onInput:this.handleInput,onKeyDown:this.handleKeyDown}),this.renderFloatingLabel(t.label,e,t.required,o)),this.renderErrors(),0===i.length&&this.renderHint(t.hint))}renderPasswordField(t){const e=`input-${t.id}`,i=this.getErrors(),o=!!(this.value&&this.value.length>0),n=t.config?.forgot_password_link;return r("div",{class:"input-wrapper",part:"input-wrapper"},r("div",{class:"input-container password-container"},r("input",{id:e,class:{"input-field":!0,"has-error":i.length>0},part:"input",type:this.passwordVisible?"text":"password",name:t.id,"data-input-name":t.id,value:this.value??"",placeholder:" ",required:t.required,disabled:this.disabled,minLength:t.config?.min_length,autocomplete:"current-password",onInput:this.handleInput,onKeyDown:this.handleKeyDown}),this.renderFloatingLabel(t.label,e,t.required,o),r("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===i.length&&this.renderHint(t.hint),n&&r("div",{class:"field-link",part:"field-link"},r("a",{href:n,class:"link",part:"link"},"Forgot password?")))}renderNumberField(t){const e=`input-${t.id}`,i=this.getErrors(),{placeholder:o,min:n,max:a,step:s}=t.config??{};return r("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(t.label,e,t.required),r("input",{id:e,class:{"input-field":!0,"has-error":i.length>0},part:"input",type:"number",name:t.id,value:this.value??"",placeholder:o,required:t.required,disabled:this.disabled,min:n,max:a,step:s,onInput:this.handleInput,onKeyDown:this.handleKeyDown}),this.renderErrors(),0===i.length&&this.renderHint(t.hint))}renderTelField(t){const e=`input-${t.id}`,i=this.getErrors();return r("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(t.label,e,t.required),r("input",{id:e,class:{"input-field":!0,"has-error":i.length>0},part:"input",type:"tel",name:t.id,value:this.value??"",placeholder:t.config?.placeholder,required:t.required,disabled:this.disabled,autocomplete:"tel",onInput:this.handleInput,onKeyDown:this.handleKeyDown}),this.renderErrors(),0===i.length&&this.renderHint(t.hint))}renderUrlField(t){const e=`input-${t.id}`,i=this.getErrors();return r("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(t.label,e,t.required),r("input",{id:e,class:{"input-field":!0,"has-error":i.length>0},part:"input",type:"url",name:t.id,value:this.value??"",placeholder:t.config?.placeholder,required:t.required,disabled:this.disabled,onInput:this.handleInput,onKeyDown:this.handleKeyDown}),this.renderErrors(),0===i.length&&this.renderHint(t.hint))}renderDateField(t){const e=`input-${t.id}`,i=this.getErrors(),{min:o,max:n}=t.config??{};return r("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(t.label,e,t.required),r("input",{id:e,class:{"input-field":!0,"has-error":i.length>0},part:"input",type:"date",name:t.id,value:this.value??"",required:t.required,disabled:this.disabled,min:o,max:n,onInput:this.handleInput,onKeyDown:this.handleKeyDown}),this.renderErrors(),0===i.length&&this.renderHint(t.hint))}renderBooleanField(t){return r("label",{class:"checkbox-wrapper",part:"checkbox-wrapper"},r("input",{type:"checkbox",part:"checkbox",name:t.id,checked:"true"===this.value||!0===t.config?.default_value,required:t.required,disabled:this.disabled,onChange:this.handleCheckbox}),r("span",{class:"checkbox-label",part:"checkbox-label"},t.label))}renderLegalField(t){const e=t.config?.text??t.label??"",i=!0===t.config?.html;return r("label",{class:"checkbox-wrapper",part:"checkbox-wrapper"},r("input",{type:"checkbox",part:"checkbox",name:t.id,checked:"true"===this.value,required:t.required,disabled:this.disabled,onChange:this.handleCheckbox}),i?r("span",{class:"checkbox-label",part:"checkbox-label",innerHTML:e}):r("span",{class:"checkbox-label",part:"checkbox-label"},e))}renderDropdownField(t){const e=`input-${t.id}`,i=this.getErrors(),{options:o,placeholder:n}=t.config??{};return r("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(t.label,e,t.required),r("select",{id:e,class:{"input-field":!0,"has-error":i.length>0},part:"input select",name:t.id,required:t.required,disabled:this.disabled,onChange:this.handleInput},n&&r("option",{value:"",disabled:!0,selected:!this.value},n),o?.map((t=>r("option",{value:t.value,selected:this.value===t.value,key:t.value},t.label)))),this.renderErrors(),0===i.length&&this.renderHint(t.hint))}renderChoiceField(t){const e=this.getErrors(),{options:i,display:o}=t.config??{},n="checkbox"===o,a=n?"checkbox":"radio";return r("div",{class:"choice-wrapper",part:"choice-wrapper"},t.label&&r("span",{class:"choice-label",part:"choice-label"},t.label,t.required&&r("span",{class:"required"},"*")),r("div",{class:"choice-options",part:"choice-options"},i?.map((e=>r("label",{class:"choice-option",part:"choice-option",key:e.value},r("input",{type:a,part:a,name:t.id,value:e.value,checked:this.value===e.value,required:t.required&&!n,disabled:this.disabled,onChange:this.handleInput}),r("span",null,e.label))))),this.renderErrors(),0===e.length&&this.renderHint(t.hint))}renderSocialField(t){const e=t.config?.providers??[],i=t.config?.provider_details,o=new Map(i?.map((t=>[t.name,t]))??[]),n=t=>{const e=o.get(t),i=this.sanitizeForCssToken(t);return e?.icon_url?r("img",{class:"social-icon",part:`social-icon social-icon-${i}`,src:e.icon_url,alt:e.display_name||t}):null};return r("div",{class:"social-buttons",part:"social-buttons"},e.map((t=>{const e=this.sanitizeForCssToken(t),i=(t=>{const e=o.get(t);return e?.strategy??t})(t),a=n(t);return r("button",{type:"button",class:`btn btn-secondary btn-social btn-social-${e}${a?"":" no-icon"}`,part:`button button-secondary button-social button-social-${e}`,"data-connection-name":t,"data-strategy":i,disabled:this.disabled,onClick:e=>this.handleButtonClick(e,"SOCIAL",t),key:t},a,r("span",{class:"btn-social-content",part:`button-social-content button-social-content-${e}`},r("span",{part:`button-social-text button-social-text-${e}`},(t=>{const e=o.get(t);return e?.display_name?e.display_name:t.split("-").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join(" ")})(t)),r("span",{class:"btn-social-subtitle",part:`button-social-subtitle button-social-subtitle-${e}`})))})))}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}}};i.style=':host{display:block}.input-wrapper{display:flex;flex-direction:column;position:relative;margin-bottom:16px}.input-container{position:relative;width:100%}.input-label{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size: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{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-text, #1e212a);background-color:var(--ah-color-input-bg, #ffffff);border:1px solid var(--ah-color-border, #c9cace);border-radius:var(--ah-input-radius, 3px);outline:none;transition:border-color 0.15s ease-out,\\n 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-text-muted, #65676e);transition:color 0.15s ease}.password-toggle:hover{color: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: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:14px;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: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,\\n border-color 0.15s ease,\\n 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-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{filter:brightness(0.85)}.btn-secondary{background-color:var(--ah-color-bg, #ffffff);color:var(--ah-color-text, #1e212a);border:1px solid 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}.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:20px;font-weight:400;color:var(--ah-color-text, #1e212a);margin:8px 0;line-height:1.3}.text-title.text-success{color:var(--ah-color-success, #13a769)}.text-description{font-size:14px;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:14px;transition:color 0.15s ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid 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:14px;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 .signup-link{margin-top:16px;text-align:center;font-size:14px;color:var(--ah-color-text, #1e212a)}';export{i as authhero_node}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{t,p as e,H as r,c as i,h as o}from"./p-EokuR0qI.js";const n=e(class extends r{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.fieldChange=i(this,"fieldChange"),this.buttonClick=i(this,"buttonClick")}component;value;disabled=!1;passwordVisible=!1;fieldChange;buttonClick;handleInput=t=>{this.fieldChange.emit({id:this.component.id,value:t.target.value})};handleKeyDown=t=>{"Enter"===t.key&&(t.preventDefault(),this.buttonClick.emit({id:"submit",type:"submit",value:"next"}))};handleCheckbox=t=>{this.fieldChange.emit({id:this.component.id,value:t.target.checked?"true":"false"})};sanitizeForCssToken(t){return t.toLowerCase().replace(/[^a-z0-9-]/g,"-").replace(/-+/g,"-").replace(/^-|-$/g,"")}handleButtonClick=(t,e,r)=>{t.preventDefault(),this.buttonClick.emit({id:this.component.id,type:e,value:r})};togglePasswordVisibility=()=>{this.passwordVisible=!this.passwordVisible};getErrors(){const t=this.component;return t.messages?.filter((t=>"error"===t.type))||[]}renderFloatingLabel(t,e,r,i){return t?o("label",{class:{"input-label":!0,floating:!!i},part:"label",htmlFor:e},t,r&&o("span",{class:"required"},"*")):null}renderLabel(t,e,r){return t?o("label",{class:"input-label",part:"label",htmlFor:e},t,r&&o("span",{class:"required"},"*")):null}renderPasswordToggle(){return this.passwordVisible?o("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"},o("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"}),o("line",{x1:"1",y1:"1",x2:"23",y2:"23"})):o("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"},o("path",{d:"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"}),o("circle",{cx:"12",cy:"12",r:"3"}))}renderErrors(){return this.getErrors().map((t=>o("span",{class:"error-text",part:"error-text",key:t.id??t.text},t.text)))}renderHint(t){return t?o("span",{class:"helper-text",part:"helper-text"},t):null}renderDivider(){return o("hr",{class:"divider",part:"divider"})}renderHtml(t){return o("div",{class:"html-content",part:"html-content",innerHTML:t.config?.content??""})}renderImage(t){const{src:e,alt:r,width:i,height:n}=t.config??{};return e?o("img",{class:"image",part:"image",src:e,alt:r??"",width:i,height:n,loading:"lazy"}):null}renderRichText(t){return o("div",{class:"rich-text",part:"rich-text",innerHTML:t.config?.content??""})}renderNextButton(t){return o("button",{type:"submit",class:"btn btn-primary",part:"button button-primary","data-primary-action-button":!0,disabled:this.disabled,onClick:t=>this.handleButtonClick(t,"submit","next")},t.config.text??"Continue")}renderPreviousButton(t){return o("button",{type:"button",class:"btn btn-secondary",part:"button button-secondary",disabled:this.disabled,onClick:t=>this.handleButtonClick(t,"previous","back")},t.config.text??"Back")}renderJumpButton(t){return o("button",{type:"button",class:"btn btn-link",part:"button button-link",disabled:this.disabled,onClick:e=>this.handleButtonClick(e,"jump",t.config.target_step)},t.config.text??"Go")}renderResendButton(t){return o("button",{type:"button",class:"btn btn-link",part:"button button-link",disabled:this.disabled,onClick:e=>this.handleButtonClick(e,"resend",t.config.resend_action)},t.config.text??"Resend")}renderTextField(t){const e=`input-${t.id}`,r=this.getErrors(),{multiline:i,max_length:n}=t.config??{},a=!!(this.value&&this.value.length>0);return i?o("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(t.label,e,t.required),o("textarea",{id:e,class:{"input-field":!0,"has-error":r.length>0},part:"input textarea",name:t.id,placeholder:" ",required:t.required,disabled:this.disabled,maxLength:n,onInput:this.handleInput},this.value??""),this.renderErrors(),0===r.length&&this.renderHint(t.hint)):o("div",{class:"input-wrapper",part:"input-wrapper"},o("div",{class:"input-container"},o("input",{id:e,class:{"input-field":!0,"has-error":r.length>0},part:"input",type:t.sensitive?"password":"text",name:t.id,"data-input-name":t.id,value:this.value??"",placeholder:" ",required:t.required,disabled:this.disabled,maxLength:n,onInput:this.handleInput,onKeyDown:this.handleKeyDown}),this.renderFloatingLabel(t.label,e,t.required,a)),this.renderErrors(),0===r.length&&this.renderHint(t.hint))}renderEmailField(t){const e=`input-${t.id}`,r=this.getErrors(),i=!!(this.value&&this.value.length>0);return o("div",{class:"input-wrapper",part:"input-wrapper"},o("div",{class:"input-container"},o("input",{id:e,class:{"input-field":!0,"has-error":r.length>0},part:"input",type:"email",name:t.id,"data-input-name":t.id,value:this.value??"",placeholder:" ",required:t.required,disabled:this.disabled,autocomplete:"email",onInput:this.handleInput,onKeyDown:this.handleKeyDown}),this.renderFloatingLabel(t.label,e,t.required,i)),this.renderErrors(),0===r.length&&this.renderHint(t.hint))}renderPasswordField(t){const e=`input-${t.id}`,r=this.getErrors(),i=!!(this.value&&this.value.length>0),n=t.config?.forgot_password_link;return o("div",{class:"input-wrapper",part:"input-wrapper"},o("div",{class:"input-container password-container"},o("input",{id:e,class:{"input-field":!0,"has-error":r.length>0},part:"input",type:this.passwordVisible?"text":"password",name:t.id,"data-input-name":t.id,value:this.value??"",placeholder:" ",required:t.required,disabled:this.disabled,minLength:t.config?.min_length,autocomplete:"current-password",onInput:this.handleInput,onKeyDown:this.handleKeyDown}),this.renderFloatingLabel(t.label,e,t.required,i),o("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===r.length&&this.renderHint(t.hint),n&&o("div",{class:"field-link",part:"field-link"},o("a",{href:n,class:"link",part:"link"},"Forgot password?")))}renderNumberField(t){const e=`input-${t.id}`,r=this.getErrors(),{placeholder:i,min:n,max:a,step:s}=t.config??{};return o("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(t.label,e,t.required),o("input",{id:e,class:{"input-field":!0,"has-error":r.length>0},part:"input",type:"number",name:t.id,value:this.value??"",placeholder:i,required:t.required,disabled:this.disabled,min:n,max:a,step:s,onInput:this.handleInput,onKeyDown:this.handleKeyDown}),this.renderErrors(),0===r.length&&this.renderHint(t.hint))}renderTelField(t){const e=`input-${t.id}`,r=this.getErrors();return o("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(t.label,e,t.required),o("input",{id:e,class:{"input-field":!0,"has-error":r.length>0},part:"input",type:"tel",name:t.id,value:this.value??"",placeholder:t.config?.placeholder,required:t.required,disabled:this.disabled,autocomplete:"tel",onInput:this.handleInput,onKeyDown:this.handleKeyDown}),this.renderErrors(),0===r.length&&this.renderHint(t.hint))}renderUrlField(t){const e=`input-${t.id}`,r=this.getErrors();return o("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(t.label,e,t.required),o("input",{id:e,class:{"input-field":!0,"has-error":r.length>0},part:"input",type:"url",name:t.id,value:this.value??"",placeholder:t.config?.placeholder,required:t.required,disabled:this.disabled,onInput:this.handleInput,onKeyDown:this.handleKeyDown}),this.renderErrors(),0===r.length&&this.renderHint(t.hint))}renderDateField(t){const e=`input-${t.id}`,r=this.getErrors(),{min:i,max:n}=t.config??{};return o("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(t.label,e,t.required),o("input",{id:e,class:{"input-field":!0,"has-error":r.length>0},part:"input",type:"date",name:t.id,value:this.value??"",required:t.required,disabled:this.disabled,min:i,max:n,onInput:this.handleInput,onKeyDown:this.handleKeyDown}),this.renderErrors(),0===r.length&&this.renderHint(t.hint))}renderBooleanField(t){return o("label",{class:"checkbox-wrapper",part:"checkbox-wrapper"},o("input",{type:"checkbox",part:"checkbox",name:t.id,checked:"true"===this.value||!0===t.config?.default_value,required:t.required,disabled:this.disabled,onChange:this.handleCheckbox}),o("span",{class:"checkbox-label",part:"checkbox-label"},t.label))}renderLegalField(t){const e=t.config?.text??t.label??"",r=!0===t.config?.html;return o("label",{class:"checkbox-wrapper",part:"checkbox-wrapper"},o("input",{type:"checkbox",part:"checkbox",name:t.id,checked:"true"===this.value,required:t.required,disabled:this.disabled,onChange:this.handleCheckbox}),r?o("span",{class:"checkbox-label",part:"checkbox-label",innerHTML:e}):o("span",{class:"checkbox-label",part:"checkbox-label"},e))}renderDropdownField(t){const e=`input-${t.id}`,r=this.getErrors(),{options:i,placeholder:n}=t.config??{};return o("div",{class:"input-wrapper",part:"input-wrapper"},this.renderLabel(t.label,e,t.required),o("select",{id:e,class:{"input-field":!0,"has-error":r.length>0},part:"input select",name:t.id,required:t.required,disabled:this.disabled,onChange:this.handleInput},n&&o("option",{value:"",disabled:!0,selected:!this.value},n),i?.map((t=>o("option",{value:t.value,selected:this.value===t.value,key:t.value},t.label)))),this.renderErrors(),0===r.length&&this.renderHint(t.hint))}renderChoiceField(t){const e=this.getErrors(),{options:r,display:i}=t.config??{},n="checkbox"===i,a=n?"checkbox":"radio";return o("div",{class:"choice-wrapper",part:"choice-wrapper"},t.label&&o("span",{class:"choice-label",part:"choice-label"},t.label,t.required&&o("span",{class:"required"},"*")),o("div",{class:"choice-options",part:"choice-options"},r?.map((e=>o("label",{class:"choice-option",part:"choice-option",key:e.value},o("input",{type:a,part:a,name:t.id,value:e.value,checked:this.value===e.value,required:t.required&&!n,disabled:this.disabled,onChange:this.handleInput}),o("span",null,e.label))))),this.renderErrors(),0===e.length&&this.renderHint(t.hint))}renderSocialField(t){const e=t.config?.providers??[],r=t.config?.provider_details,i=new Map(r?.map((t=>[t.name,t]))??[]),n=t=>{const e=i.get(t),r=this.sanitizeForCssToken(t);return e?.icon_url?o("img",{class:"social-icon",part:`social-icon social-icon-${r}`,src:e.icon_url,alt:e.display_name||t}):null};return o("div",{class:"social-buttons",part:"social-buttons"},e.map((t=>{const e=this.sanitizeForCssToken(t),r=(t=>{const e=i.get(t);return e?.strategy??t})(t),a=n(t);return o("button",{type:"button",class:`btn btn-secondary btn-social btn-social-${e}${a?"":" no-icon"}`,part:`button button-secondary button-social button-social-${e}`,"data-connection-name":t,"data-strategy":r,disabled:this.disabled,onClick:e=>this.handleButtonClick(e,"SOCIAL",t),key:t},a,o("span",{class:"btn-social-content",part:`button-social-content button-social-content-${e}`},o("span",{part:`button-social-text button-social-text-${e}`},(t=>{const e=i.get(t);return e?.display_name?e.display_name:t.split("-").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join(" ")})(t)),o("span",{class:"btn-social-subtitle",part:`button-social-subtitle button-social-subtitle-${e}`})))})))}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;position:relative;margin-bottom:16px}.input-container{position:relative;width:100%}.input-label{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size: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{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-text, #1e212a);background-color:var(--ah-color-input-bg, #ffffff);border:1px solid var(--ah-color-border, #c9cace);border-radius:var(--ah-input-radius, 3px);outline:none;transition:border-color 0.15s ease-out,\\n 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-text-muted, #65676e);transition:color 0.15s ease}.password-toggle:hover{color: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: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:14px;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: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,\\n border-color 0.15s ease,\\n 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-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{filter:brightness(0.85)}.btn-secondary{background-color:var(--ah-color-bg, #ffffff);color:var(--ah-color-text, #1e212a);border:1px solid 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}.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:20px;font-weight:400;color:var(--ah-color-text, #1e212a);margin:8px 0;line-height:1.3}.text-title.text-success{color:var(--ah-color-success, #13a769)}.text-description{font-size:14px;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:14px;transition:color 0.15s ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid 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:14px;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 .signup-link{margin-top:16px;text-align:center;font-size:14px;color:var(--ah-color-text, #1e212a)}'}},[513,"authhero-node",{component:[16],value:[1],disabled:[4],passwordVisible:[32]}]);function a(){"undefined"!=typeof customElements&&["authhero-node"].forEach((e=>{"authhero-node"===e&&(customElements.get(t(e))||customElements.define(t(e),n))}))}a();export{n as A,a as d}
|