@authhero/widget 0.19.2 → 0.21.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.
Files changed (37) hide show
  1. package/dist/authhero-widget/authhero-widget.esm.js +1 -1
  2. package/dist/authhero-widget/index.esm.js +1 -1
  3. package/dist/authhero-widget/{p-5hZ8Vbm9.js → p-BFP_5sHV.js} +1 -1
  4. package/dist/authhero-widget/p-c03e5b57.entry.js +1 -0
  5. package/dist/authhero-widget/p-f3a92b50.entry.js +1 -0
  6. package/dist/cjs/authhero-node.cjs.entry.js +448 -5
  7. package/dist/cjs/authhero-widget.cjs.entry.js +200 -21
  8. package/dist/cjs/authhero-widget.cjs.js +2 -2
  9. package/dist/cjs/{index-vX5cgLV-.js → index-CUBT14z-.js} +21 -0
  10. package/dist/cjs/index.cjs.js +1 -1
  11. package/dist/cjs/loader.cjs.js +2 -2
  12. package/dist/collection/components/authhero-node/authhero-node.css +74 -0
  13. package/dist/collection/components/authhero-node/authhero-node.js +219 -6
  14. package/dist/collection/components/authhero-widget/authhero-widget.css +2 -2
  15. package/dist/collection/components/authhero-widget/authhero-widget.js +102 -5
  16. package/dist/collection/utils/branding.js +98 -16
  17. package/dist/collection/utils/country-data.js +235 -0
  18. package/dist/components/authhero-node.js +1 -1
  19. package/dist/components/authhero-widget.js +1 -1
  20. package/dist/components/index.js +1 -1
  21. package/dist/components/p-D9Clv9VJ.js +1 -0
  22. package/dist/components/{p-EokuR0qI.js → p-DpfoRsj0.js} +1 -1
  23. package/dist/esm/authhero-node.entry.js +448 -5
  24. package/dist/esm/authhero-widget.entry.js +200 -21
  25. package/dist/esm/authhero-widget.js +3 -3
  26. package/dist/esm/{index-5hZ8Vbm9.js → index-BFP_5sHV.js} +21 -0
  27. package/dist/esm/index.js +1 -1
  28. package/dist/esm/loader.js +3 -3
  29. package/dist/types/components/authhero-node/authhero-node.d.ts +36 -0
  30. package/dist/types/components/authhero-widget/authhero-widget.d.ts +20 -1
  31. package/dist/types/utils/country-data.d.ts +23 -0
  32. package/hydrate/index.js +668 -25
  33. package/hydrate/index.mjs +668 -25
  34. package/package.json +2 -2
  35. package/dist/authhero-widget/p-18d0a438.entry.js +0 -1
  36. package/dist/authhero-widget/p-bb3657ce.entry.js +0 -1
  37. package/dist/components/p-NKUIiiOq.js +0 -1
@@ -1,8 +1,244 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-vX5cgLV-.js');
3
+ var index = require('./index-CUBT14z-.js');
4
4
 
5
- const authheroNodeCss = () => `:host{display:block}.input-wrapper{display:flex;flex-direction:column;position:relative;margin-top:8px;margin-bottom:16px}.input-container{position:relative;width:100%}.input-label{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size: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 .forgot-password-link{text-align:right;font-size:13px;margin-top:4px}.rich-text .forgot-password-link a{font-size:13px;color:var(--ah-color-link, #635dff)}.rich-text .signup-link{margin-top:16px;text-align:center;font-size:14px;color:var(--ah-color-text, #1e212a)}`;
5
+ /**
6
+ * Country data for phone number input with country code selector.
7
+ * Each entry contains:
8
+ * - code: ISO 3166-1 alpha-2 country code
9
+ * - dialCode: International dialing prefix
10
+ * - flag: Unicode flag emoji
11
+ * - name: Country name in English
12
+ */
13
+ /**
14
+ * Get flag emoji from ISO 3166-1 alpha-2 country code.
15
+ * Uses Unicode Regional Indicator Symbol Letters.
16
+ */
17
+ function flagEmoji(code) {
18
+ return String.fromCodePoint(...code
19
+ .toUpperCase()
20
+ .split("")
21
+ .map((c) => 0x1f1e6 - 65 + c.charCodeAt(0)));
22
+ }
23
+ /**
24
+ * Full list of countries with dial codes, sorted by dial code (numerically)
25
+ * with secondary sort by country code for ties.
26
+ */
27
+ const countries = [
28
+ { code: "US", dialCode: "+1", name: "United States" },
29
+ { code: "CA", dialCode: "+1", name: "Canada" },
30
+ { code: "AG", dialCode: "+1", name: "Antigua and Barbuda" },
31
+ { code: "BS", dialCode: "+1", name: "Bahamas" },
32
+ { code: "BB", dialCode: "+1", name: "Barbados" },
33
+ { code: "DM", dialCode: "+1", name: "Dominica" },
34
+ { code: "DO", dialCode: "+1", name: "Dominican Republic" },
35
+ { code: "GD", dialCode: "+1", name: "Grenada" },
36
+ { code: "JM", dialCode: "+1", name: "Jamaica" },
37
+ { code: "KN", dialCode: "+1", name: "Saint Kitts and Nevis" },
38
+ { code: "LC", dialCode: "+1", name: "Saint Lucia" },
39
+ { code: "VC", dialCode: "+1", name: "Saint Vincent and the Grenadines" },
40
+ { code: "TT", dialCode: "+1", name: "Trinidad and Tobago" },
41
+ { code: "PR", dialCode: "+1", name: "Puerto Rico" },
42
+ { code: "KZ", dialCode: "+7", name: "Kazakhstan" },
43
+ { code: "RU", dialCode: "+7", name: "Russia" },
44
+ { code: "EG", dialCode: "+20", name: "Egypt" },
45
+ { code: "ZA", dialCode: "+27", name: "South Africa" },
46
+ { code: "GR", dialCode: "+30", name: "Greece" },
47
+ { code: "NL", dialCode: "+31", name: "Netherlands" },
48
+ { code: "BE", dialCode: "+32", name: "Belgium" },
49
+ { code: "FR", dialCode: "+33", name: "France" },
50
+ { code: "ES", dialCode: "+34", name: "Spain" },
51
+ { code: "HU", dialCode: "+36", name: "Hungary" },
52
+ { code: "IT", dialCode: "+39", name: "Italy" },
53
+ { code: "RO", dialCode: "+40", name: "Romania" },
54
+ { code: "CH", dialCode: "+41", name: "Switzerland" },
55
+ { code: "AT", dialCode: "+43", name: "Austria" },
56
+ { code: "GB", dialCode: "+44", name: "United Kingdom" },
57
+ { code: "DK", dialCode: "+45", name: "Denmark" },
58
+ { code: "SE", dialCode: "+46", name: "Sweden" },
59
+ { code: "NO", dialCode: "+47", name: "Norway" },
60
+ { code: "PL", dialCode: "+48", name: "Poland" },
61
+ { code: "DE", dialCode: "+49", name: "Germany" },
62
+ { code: "PE", dialCode: "+51", name: "Peru" },
63
+ { code: "MX", dialCode: "+52", name: "Mexico" },
64
+ { code: "CU", dialCode: "+53", name: "Cuba" },
65
+ { code: "AR", dialCode: "+54", name: "Argentina" },
66
+ { code: "BR", dialCode: "+55", name: "Brazil" },
67
+ { code: "CL", dialCode: "+56", name: "Chile" },
68
+ { code: "CO", dialCode: "+57", name: "Colombia" },
69
+ { code: "VE", dialCode: "+58", name: "Venezuela" },
70
+ { code: "MY", dialCode: "+60", name: "Malaysia" },
71
+ { code: "AU", dialCode: "+61", name: "Australia" },
72
+ { code: "ID", dialCode: "+62", name: "Indonesia" },
73
+ { code: "PH", dialCode: "+63", name: "Philippines" },
74
+ { code: "NZ", dialCode: "+64", name: "New Zealand" },
75
+ { code: "SG", dialCode: "+65", name: "Singapore" },
76
+ { code: "TH", dialCode: "+66", name: "Thailand" },
77
+ { code: "JP", dialCode: "+81", name: "Japan" },
78
+ { code: "KR", dialCode: "+82", name: "South Korea" },
79
+ { code: "VN", dialCode: "+84", name: "Vietnam" },
80
+ { code: "CN", dialCode: "+86", name: "China" },
81
+ { code: "TR", dialCode: "+90", name: "Turkey" },
82
+ { code: "IN", dialCode: "+91", name: "India" },
83
+ { code: "PK", dialCode: "+92", name: "Pakistan" },
84
+ { code: "AF", dialCode: "+93", name: "Afghanistan" },
85
+ { code: "LK", dialCode: "+94", name: "Sri Lanka" },
86
+ { code: "MM", dialCode: "+95", name: "Myanmar" },
87
+ { code: "IR", dialCode: "+98", name: "Iran" },
88
+ { code: "SS", dialCode: "+211", name: "South Sudan" },
89
+ { code: "MA", dialCode: "+212", name: "Morocco" },
90
+ { code: "DZ", dialCode: "+213", name: "Algeria" },
91
+ { code: "TN", dialCode: "+216", name: "Tunisia" },
92
+ { code: "LY", dialCode: "+218", name: "Libya" },
93
+ { code: "GM", dialCode: "+220", name: "Gambia" },
94
+ { code: "SN", dialCode: "+221", name: "Senegal" },
95
+ { code: "MR", dialCode: "+222", name: "Mauritania" },
96
+ { code: "ML", dialCode: "+223", name: "Mali" },
97
+ { code: "GN", dialCode: "+224", name: "Guinea" },
98
+ { code: "CI", dialCode: "+225", name: "Ivory Coast" },
99
+ { code: "BF", dialCode: "+226", name: "Burkina Faso" },
100
+ { code: "NE", dialCode: "+227", name: "Niger" },
101
+ { code: "TG", dialCode: "+228", name: "Togo" },
102
+ { code: "BJ", dialCode: "+229", name: "Benin" },
103
+ { code: "MU", dialCode: "+230", name: "Mauritius" },
104
+ { code: "LR", dialCode: "+231", name: "Liberia" },
105
+ { code: "SL", dialCode: "+232", name: "Sierra Leone" },
106
+ { code: "GH", dialCode: "+233", name: "Ghana" },
107
+ { code: "NG", dialCode: "+234", name: "Nigeria" },
108
+ { code: "TD", dialCode: "+235", name: "Chad" },
109
+ { code: "CF", dialCode: "+236", name: "Central African Republic" },
110
+ { code: "CM", dialCode: "+237", name: "Cameroon" },
111
+ { code: "CV", dialCode: "+238", name: "Cape Verde" },
112
+ { code: "ST", dialCode: "+239", name: "São Tomé and Príncipe" },
113
+ { code: "GQ", dialCode: "+240", name: "Equatorial Guinea" },
114
+ { code: "GA", dialCode: "+241", name: "Gabon" },
115
+ { code: "CG", dialCode: "+242", name: "Congo" },
116
+ { code: "CD", dialCode: "+243", name: "Congo (DRC)" },
117
+ { code: "AO", dialCode: "+244", name: "Angola" },
118
+ { code: "GW", dialCode: "+245", name: "Guinea-Bissau" },
119
+ { code: "SC", dialCode: "+248", name: "Seychelles" },
120
+ { code: "SD", dialCode: "+249", name: "Sudan" },
121
+ { code: "RW", dialCode: "+250", name: "Rwanda" },
122
+ { code: "ET", dialCode: "+251", name: "Ethiopia" },
123
+ { code: "SO", dialCode: "+252", name: "Somalia" },
124
+ { code: "DJ", dialCode: "+253", name: "Djibouti" },
125
+ { code: "KE", dialCode: "+254", name: "Kenya" },
126
+ { code: "TZ", dialCode: "+255", name: "Tanzania" },
127
+ { code: "UG", dialCode: "+256", name: "Uganda" },
128
+ { code: "BI", dialCode: "+257", name: "Burundi" },
129
+ { code: "MZ", dialCode: "+258", name: "Mozambique" },
130
+ { code: "ZM", dialCode: "+260", name: "Zambia" },
131
+ { code: "MG", dialCode: "+261", name: "Madagascar" },
132
+ { code: "RE", dialCode: "+262", name: "Réunion" },
133
+ { code: "ZW", dialCode: "+263", name: "Zimbabwe" },
134
+ { code: "NA", dialCode: "+264", name: "Namibia" },
135
+ { code: "MW", dialCode: "+265", name: "Malawi" },
136
+ { code: "LS", dialCode: "+266", name: "Lesotho" },
137
+ { code: "BW", dialCode: "+267", name: "Botswana" },
138
+ { code: "SZ", dialCode: "+268", name: "Eswatini" },
139
+ { code: "KM", dialCode: "+269", name: "Comoros" },
140
+ { code: "ER", dialCode: "+291", name: "Eritrea" },
141
+ { code: "PT", dialCode: "+351", name: "Portugal" },
142
+ { code: "LU", dialCode: "+352", name: "Luxembourg" },
143
+ { code: "IE", dialCode: "+353", name: "Ireland" },
144
+ { code: "IS", dialCode: "+354", name: "Iceland" },
145
+ { code: "AL", dialCode: "+355", name: "Albania" },
146
+ { code: "MT", dialCode: "+356", name: "Malta" },
147
+ { code: "CY", dialCode: "+357", name: "Cyprus" },
148
+ { code: "FI", dialCode: "+358", name: "Finland" },
149
+ { code: "BG", dialCode: "+359", name: "Bulgaria" },
150
+ { code: "LT", dialCode: "+370", name: "Lithuania" },
151
+ { code: "LV", dialCode: "+371", name: "Latvia" },
152
+ { code: "EE", dialCode: "+372", name: "Estonia" },
153
+ { code: "MD", dialCode: "+373", name: "Moldova" },
154
+ { code: "AM", dialCode: "+374", name: "Armenia" },
155
+ { code: "BY", dialCode: "+375", name: "Belarus" },
156
+ { code: "AD", dialCode: "+376", name: "Andorra" },
157
+ { code: "MC", dialCode: "+377", name: "Monaco" },
158
+ { code: "SM", dialCode: "+378", name: "San Marino" },
159
+ { code: "UA", dialCode: "+380", name: "Ukraine" },
160
+ { code: "RS", dialCode: "+381", name: "Serbia" },
161
+ { code: "ME", dialCode: "+382", name: "Montenegro" },
162
+ { code: "XK", dialCode: "+383", name: "Kosovo" },
163
+ { code: "HR", dialCode: "+385", name: "Croatia" },
164
+ { code: "SI", dialCode: "+386", name: "Slovenia" },
165
+ { code: "BA", dialCode: "+387", name: "Bosnia and Herzegovina" },
166
+ { code: "MK", dialCode: "+389", name: "North Macedonia" },
167
+ { code: "CZ", dialCode: "+420", name: "Czech Republic" },
168
+ { code: "SK", dialCode: "+421", name: "Slovakia" },
169
+ { code: "LI", dialCode: "+423", name: "Liechtenstein" },
170
+ { code: "FK", dialCode: "+500", name: "Falkland Islands" },
171
+ { code: "BZ", dialCode: "+501", name: "Belize" },
172
+ { code: "GT", dialCode: "+502", name: "Guatemala" },
173
+ { code: "SV", dialCode: "+503", name: "El Salvador" },
174
+ { code: "HN", dialCode: "+504", name: "Honduras" },
175
+ { code: "NI", dialCode: "+505", name: "Nicaragua" },
176
+ { code: "CR", dialCode: "+506", name: "Costa Rica" },
177
+ { code: "PA", dialCode: "+507", name: "Panama" },
178
+ { code: "HT", dialCode: "+509", name: "Haiti" },
179
+ { code: "GP", dialCode: "+590", name: "Guadeloupe" },
180
+ { code: "BO", dialCode: "+591", name: "Bolivia" },
181
+ { code: "GY", dialCode: "+592", name: "Guyana" },
182
+ { code: "EC", dialCode: "+593", name: "Ecuador" },
183
+ { code: "GF", dialCode: "+594", name: "French Guiana" },
184
+ { code: "PY", dialCode: "+595", name: "Paraguay" },
185
+ { code: "MQ", dialCode: "+596", name: "Martinique" },
186
+ { code: "SR", dialCode: "+597", name: "Suriname" },
187
+ { code: "UY", dialCode: "+598", name: "Uruguay" },
188
+ { code: "TL", dialCode: "+670", name: "Timor-Leste" },
189
+ { code: "BN", dialCode: "+673", name: "Brunei" },
190
+ { code: "NR", dialCode: "+674", name: "Nauru" },
191
+ { code: "PG", dialCode: "+675", name: "Papua New Guinea" },
192
+ { code: "TO", dialCode: "+676", name: "Tonga" },
193
+ { code: "SB", dialCode: "+677", name: "Solomon Islands" },
194
+ { code: "VU", dialCode: "+678", name: "Vanuatu" },
195
+ { code: "FJ", dialCode: "+679", name: "Fiji" },
196
+ { code: "PW", dialCode: "+680", name: "Palau" },
197
+ { code: "WS", dialCode: "+685", name: "Samoa" },
198
+ { code: "KI", dialCode: "+686", name: "Kiribati" },
199
+ { code: "FM", dialCode: "+691", name: "Micronesia" },
200
+ { code: "MH", dialCode: "+692", name: "Marshall Islands" },
201
+ { code: "KP", dialCode: "+850", name: "North Korea" },
202
+ { code: "HK", dialCode: "+852", name: "Hong Kong" },
203
+ { code: "MO", dialCode: "+853", name: "Macau" },
204
+ { code: "KH", dialCode: "+855", name: "Cambodia" },
205
+ { code: "LA", dialCode: "+856", name: "Laos" },
206
+ { code: "BD", dialCode: "+880", name: "Bangladesh" },
207
+ { code: "TW", dialCode: "+886", name: "Taiwan" },
208
+ { code: "MV", dialCode: "+960", name: "Maldives" },
209
+ { code: "LB", dialCode: "+961", name: "Lebanon" },
210
+ { code: "JO", dialCode: "+962", name: "Jordan" },
211
+ { code: "SY", dialCode: "+963", name: "Syria" },
212
+ { code: "IQ", dialCode: "+964", name: "Iraq" },
213
+ { code: "KW", dialCode: "+965", name: "Kuwait" },
214
+ { code: "SA", dialCode: "+966", name: "Saudi Arabia" },
215
+ { code: "YE", dialCode: "+967", name: "Yemen" },
216
+ { code: "OM", dialCode: "+968", name: "Oman" },
217
+ { code: "PS", dialCode: "+970", name: "Palestine" },
218
+ { code: "AE", dialCode: "+971", name: "United Arab Emirates" },
219
+ { code: "IL", dialCode: "+972", name: "Israel" },
220
+ { code: "BH", dialCode: "+973", name: "Bahrain" },
221
+ { code: "QA", dialCode: "+974", name: "Qatar" },
222
+ { code: "BT", dialCode: "+975", name: "Bhutan" },
223
+ { code: "MN", dialCode: "+976", name: "Mongolia" },
224
+ { code: "NP", dialCode: "+977", name: "Nepal" },
225
+ { code: "TJ", dialCode: "+992", name: "Tajikistan" },
226
+ { code: "TM", dialCode: "+993", name: "Turkmenistan" },
227
+ { code: "AZ", dialCode: "+994", name: "Azerbaijan" },
228
+ { code: "GE", dialCode: "+995", name: "Georgia" },
229
+ { code: "KG", dialCode: "+996", name: "Kyrgyzstan" },
230
+ { code: "UZ", dialCode: "+998", name: "Uzbekistan" },
231
+ ].map((c) => ({ ...c, flag: flagEmoji(c.code) }));
232
+ /**
233
+ * Find a country by its ISO code, defaulting to US.
234
+ */
235
+ function getCountryByCode(code) {
236
+ const upper = code.toUpperCase();
237
+ return (countries.find((c) => c.code === upper) ||
238
+ countries.find((c) => c.code === "US"));
239
+ }
240
+
241
+ const authheroNodeCss = () => `:host{display:block}.input-wrapper{display:flex;flex-direction:column;position:relative;margin-top:8px;margin-bottom:16px}.input-container{position:relative;width:100%}.input-label{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size: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}.phone-input-wrapper{display:flex;align-items:stretch;gap:0;width:100%}.country-select{flex-shrink:0;width:auto;padding:12px 8px;font-size:var(--ah-font-size-body, 16px);font-family:var(--ah-font-family, inherit);border:1px solid var(--ah-color-border, #c9cace);border-right:none;border-radius:var(--ah-border-radius-input, 4px) 0 0 var(--ah-border-radius-input, 4px);background-color:var(--ah-color-surface, #fff);color:var(--ah-color-text, #1e212a);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;padding-right:22px}.country-select:focus{outline:none;border-color:var(--ah-color-primary, #635dff);box-shadow:0 0 0 1px var(--ah-color-primary, #635dff)}.country-select:disabled{opacity:0.5;cursor:not-allowed}.phone-input-wrapper .input-container{flex:1;min-width:0}.phone-input-wrapper .input-field{border-radius:0 var(--ah-border-radius-input, 4px) var(--ah-border-radius-input, 4px) 0}.phone-input-wrapper .input-label.floating,.phone-input-wrapper .input-field:focus+.input-label,.phone-input-wrapper .input-field:not(:placeholder-shown)+.input-label{left:8px}.social-buttons{display:flex;flex-direction:column;gap:12px}.btn-social{display:flex;align-items:center;justify-content:center;gap:12px}.btn-social-content{display:flex;flex-direction:column;align-items:center;text-align:center}.btn-social-subtitle{font-size:12px;font-style:italic;opacity:0.8;margin-top:2px}.btn-social-subtitle:empty{display:none}.social-icon{width:20px;height:20px;flex-shrink:0}@media (max-width: 480px){.social-buttons:has(.btn-social:nth-child(3)){flex-direction:row;flex-wrap:nowrap;justify-content:stretch;gap:8px}.social-buttons:has(.btn-social:nth-child(3)) .btn-social{width:auto;min-width:0;padding:12px;flex:1 1 0}.social-buttons:has(.btn-social:nth-child(3)) .btn-social span{display:none}.social-buttons:has(.btn-social:nth-child(3)) .social-icon{width:24px;height:24px}}.btn-icon{width:20px;height:20px;flex-shrink:0}.btn-icon img{width:100%;height:100%;object-fit:contain}.text-title{font-size: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 .forgot-password-link{text-align:right;font-size:13px;margin-top:4px}.rich-text .forgot-password-link a{font-size:13px;color:var(--ah-color-link, #635dff)}.rich-text .passwordless-link{margin-top:16px;text-align:center;font-size:14px}.rich-text .passwordless-link a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none)}.rich-text .passwordless-link a:hover{text-decoration:underline}.rich-text .signup-link{margin-top:16px;text-align:center;font-size:14px;color:var(--ah-color-text, #1e212a)}`;
6
242
 
7
243
  const AuthheroNode = class {
8
244
  constructor(hostRef) {
@@ -27,6 +263,23 @@ const AuthheroNode = class {
27
263
  * Whether the password field is visible.
28
264
  */
29
265
  passwordVisible = false;
266
+ /**
267
+ * Selected country for TEL input with country selector.
268
+ */
269
+ selectedCountry = getCountryByCode("US");
270
+ /**
271
+ * Local phone number (without dial code) for TEL input.
272
+ */
273
+ localPhoneNumber = "";
274
+ /**
275
+ * Whether the country dropdown is open.
276
+ */
277
+ countryDropdownOpen = false;
278
+ /**
279
+ * Whether the TEL field is currently in email mode (allow_email config).
280
+ * When true, the value is emitted as-is without dial code prefix.
281
+ */
282
+ telEmailMode = false;
30
283
  /**
31
284
  * Emitted when a field value changes.
32
285
  */
@@ -35,6 +288,155 @@ const AuthheroNode = class {
35
288
  * Emitted when a button is clicked.
36
289
  */
37
290
  buttonClick;
291
+ componentChanged() {
292
+ this.initCountryFromConfig();
293
+ this.initTelValue();
294
+ }
295
+ valueChanged() {
296
+ this.initTelValue();
297
+ }
298
+ componentWillLoad() {
299
+ this.initCountryFromConfig();
300
+ this.initTelValue();
301
+ }
302
+ initCountryFromConfig() {
303
+ if (this.component?.type === "TEL") {
304
+ const config = this.component.config;
305
+ const defaultCountry = config?.default_country;
306
+ if (defaultCountry) {
307
+ this.selectedCountry = getCountryByCode(defaultCountry);
308
+ }
309
+ // For allow_email mode, start in email/text mode (no country picker)
310
+ // until the user starts typing digits
311
+ if (config?.allow_email === true) {
312
+ this.telEmailMode = true;
313
+ }
314
+ }
315
+ }
316
+ /**
317
+ * Hydrate localPhoneNumber (and selectedCountry) from the effective value
318
+ * for TEL fields. The full value is stored as `{dialCode}{localNumber}`,
319
+ * e.g. "+15551234567".
320
+ */
321
+ initTelValue() {
322
+ if (this.component?.type !== "TEL")
323
+ return;
324
+ const config = this.component.config;
325
+ const allowEmail = config?.allow_email === true;
326
+ const fullValue = this.getEffectiveValue();
327
+ if (!fullValue) {
328
+ this.localPhoneNumber = "";
329
+ if (allowEmail) {
330
+ this.telEmailMode = true;
331
+ }
332
+ return;
333
+ }
334
+ // Try to match a country by dial code (longest match first)
335
+ if (fullValue.startsWith("+")) {
336
+ const sorted = [...countries].sort((a, b) => b.dialCode.length - a.dialCode.length);
337
+ for (const country of sorted) {
338
+ if (fullValue.startsWith(country.dialCode)) {
339
+ this.selectedCountry = country;
340
+ this.localPhoneNumber = fullValue.slice(country.dialCode.length);
341
+ if (allowEmail) {
342
+ this.telEmailMode = false;
343
+ }
344
+ return;
345
+ }
346
+ }
347
+ }
348
+ // No dial code match — check if it looks like an email or a phone number
349
+ this.localPhoneNumber = fullValue;
350
+ if (allowEmail) {
351
+ const looksLikePhone = /^[+\d]/.test(fullValue);
352
+ this.telEmailMode = !looksLikePhone;
353
+ }
354
+ }
355
+ handleCountryChange = (e) => {
356
+ const target = e.target;
357
+ this.selectedCountry = getCountryByCode(target.value);
358
+ // Re-emit the full phone number with new dial code
359
+ const fullNumber = this.localPhoneNumber
360
+ ? `${this.selectedCountry.dialCode}${this.localPhoneNumber}`
361
+ : "";
362
+ this.fieldChange.emit({ id: this.component.id, value: fullNumber });
363
+ };
364
+ /**
365
+ * Try to detect a dial code prefix in the raw input (e.g. "+46", "0046")
366
+ * and update selectedCountry accordingly. Returns the local number portion
367
+ * (after the dial code) if a match was found, or null if no match.
368
+ */
369
+ detectDialCodeFromInput(raw) {
370
+ // Normalise "00" international prefix to "+"
371
+ const normalized = raw.startsWith("00") ? "+" + raw.slice(2) : raw;
372
+ if (!normalized.startsWith("+"))
373
+ return null;
374
+ // Match longest dial code first
375
+ const sorted = [...countries].sort((a, b) => b.dialCode.length - a.dialCode.length);
376
+ for (const country of sorted) {
377
+ if (normalized.startsWith(country.dialCode)) {
378
+ this.selectedCountry = country;
379
+ return normalized.slice(country.dialCode.length);
380
+ }
381
+ }
382
+ return null;
383
+ }
384
+ handlePhoneInput = (e) => {
385
+ const target = e.target;
386
+ const value = target.value;
387
+ const config = this.component.config;
388
+ const allowEmail = config?.allow_email === true;
389
+ if (allowEmail) {
390
+ // Detect phone mode: value starts with digit or '+', and no '@'.
391
+ // When the field is empty, revert to neutral (email) mode so the
392
+ // country picker disappears and the user can start fresh.
393
+ const looksLikePhone = value.length > 0 && /^[+\d]/.test(value) && !value.includes("@");
394
+ this.telEmailMode = !looksLikePhone;
395
+ if (!this.telEmailMode) {
396
+ // Phone mode — first try dial code detection before stripping '+'
397
+ // so that typing +46 or 0046 can match a country
398
+ const dialLocal = this.detectDialCodeFromInput(value);
399
+ if (dialLocal !== null) {
400
+ // Dial code matched — strip it from the input and show only local part
401
+ const cleanedLocal = dialLocal
402
+ .replace(/[^+\d\s\-()]/g, "")
403
+ .replace(/\+/g, "");
404
+ target.value = cleanedLocal;
405
+ this.localPhoneNumber = cleanedLocal;
406
+ const fullNumber = `${this.selectedCountry.dialCode}${cleanedLocal}`;
407
+ this.fieldChange.emit({ id: this.component.id, value: fullNumber });
408
+ }
409
+ else {
410
+ // No dial code — strip non-phone chars and '+' (picker provides the prefix)
411
+ const cleaned = value.replace(/[^+\d\s\-()]/g, "").replace(/\+/g, "");
412
+ if (cleaned !== value) {
413
+ target.value = cleaned;
414
+ }
415
+ this.localPhoneNumber = cleaned;
416
+ const fullNumber = cleaned
417
+ ? `${this.selectedCountry.dialCode}${cleaned}`
418
+ : "";
419
+ this.fieldChange.emit({ id: this.component.id, value: fullNumber });
420
+ }
421
+ }
422
+ else {
423
+ // Email or text — emit as-is
424
+ this.localPhoneNumber = value;
425
+ this.fieldChange.emit({ id: this.component.id, value });
426
+ }
427
+ return;
428
+ }
429
+ // Standard phone-only mode — strip '+' since the picker provides the prefix
430
+ const cleaned = value.replace(/[^\d\s\-()]/g, "");
431
+ if (cleaned !== value) {
432
+ target.value = cleaned;
433
+ }
434
+ this.localPhoneNumber = cleaned;
435
+ const fullNumber = cleaned
436
+ ? `${this.selectedCountry.dialCode}${cleaned}`
437
+ : "";
438
+ this.fieldChange.emit({ id: this.component.id, value: fullNumber });
439
+ };
38
440
  handleInput = (e) => {
39
441
  const target = e.target;
40
442
  this.fieldChange.emit({ id: this.component.id, value: target.value });
@@ -44,6 +446,16 @@ const AuthheroNode = class {
44
446
  e.preventDefault();
45
447
  this.buttonClick.emit({ id: "submit", type: "submit", value: "next" });
46
448
  }
449
+ // In combined TEL+email mode, backspace on an empty field exits phone mode
450
+ if (e.key === "Backspace" && !this.telEmailMode) {
451
+ const target = e.target;
452
+ const config = this.component.config;
453
+ if (config?.allow_email === true && target.value.length === 0) {
454
+ this.telEmailMode = true;
455
+ this.localPhoneNumber = "";
456
+ this.fieldChange.emit({ id: this.component.id, value: "" });
457
+ }
458
+ }
47
459
  };
48
460
  handleCheckbox = (e) => {
49
461
  const target = e.target;
@@ -216,8 +628,17 @@ const AuthheroNode = class {
216
628
  renderTelField(component) {
217
629
  const inputId = `input-${component.id}`;
218
630
  const errors = this.getErrors();
219
- const effectiveValue = this.getEffectiveValue();
220
- return (index.h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), index.h("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: "tel", name: component.id, value: effectiveValue ?? "", 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)));
631
+ const config = component.config;
632
+ const allowEmail = config?.allow_email === true;
633
+ const hasValue = this.localPhoneNumber.length > 0;
634
+ // In allow_email mode, show the country picker only when the user is typing a phone number
635
+ const showCountryPicker = allowEmail ? !this.telEmailMode : true;
636
+ // Calculate dynamic width: flag + space + dial code + small padding for dropdown arrow
637
+ const selectedText = `${this.selectedCountry.flag} ${this.selectedCountry.dialCode}`;
638
+ const selectWidth = `${selectedText.length + 1}ch`;
639
+ const countrySelect = showCountryPicker ? (index.h("select", { class: "country-select", part: "country-select", style: { width: selectWidth, minWidth: "0" }, onChange: this.handleCountryChange, disabled: this.disabled, "aria-label": "Country code" }, countries.map((country) => (index.h("option", { value: country.code, selected: this.selectedCountry.code === country.code, key: country.code }, `${country.flag} ${country.dialCode}`))))) : null;
640
+ const inputType = allowEmail && this.telEmailMode ? "text" : "tel";
641
+ return (index.h("div", { class: "input-wrapper", part: "input-wrapper" }, index.h("div", { class: showCountryPicker ? "phone-input-wrapper" : "", part: "phone-input-wrapper" }, countrySelect, index.h("div", { class: "input-container" }, index.h("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: inputType, name: component.id, "data-input-name": component.id, value: this.localPhoneNumber, placeholder: " ", required: component.required, disabled: this.disabled, autocomplete: allowEmail && this.telEmailMode ? "email" : "tel-national", onInput: this.handlePhoneInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue))), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
221
642
  }
222
643
  renderUrlField(component) {
223
644
  const inputId = `input-${component.id}`;
@@ -294,7 +715,21 @@ const AuthheroNode = class {
294
715
  const safeProvider = this.sanitizeForCssToken(provider);
295
716
  const strategy = getProviderStrategy(provider);
296
717
  const icon = getProviderIcon(provider);
297
- return (index.h("button", { type: "button", class: `btn btn-secondary btn-social btn-social-${safeProvider}${icon ? "" : " no-icon"}`, part: `button button-secondary button-social button-social-${safeProvider}`, "data-connection-name": provider, "data-strategy": strategy, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "SOCIAL", provider), key: provider }, icon, index.h("span", { class: "btn-social-content", part: `button-social-content button-social-content-${safeProvider}` }, index.h("span", { part: `button-social-text button-social-text-${safeProvider}` }, getButtonText(provider)), index.h("span", { class: "btn-social-subtitle", part: `button-social-subtitle button-social-subtitle-${safeProvider}` }))));
718
+ const details = detailsMap.get(provider);
719
+ const btnClass = `btn btn-secondary btn-social btn-social-${safeProvider}${icon ? "" : " no-icon"}`;
720
+ const btnPart = `button button-secondary button-social button-social-${safeProvider}`;
721
+ const content = [
722
+ icon,
723
+ index.h("span", { class: "btn-social-content", part: `button-social-content button-social-content-${safeProvider}` }, index.h("span", { part: `button-social-text button-social-text-${safeProvider}` }, getButtonText(provider)), index.h("span", { class: "btn-social-subtitle", part: `button-social-subtitle button-social-subtitle-${safeProvider}` })),
724
+ ];
725
+ if (details?.href) {
726
+ return (index.h("a", { href: this.disabled ? undefined : details.href, class: btnClass, part: btnPart, "data-connection-name": provider, "data-strategy": strategy, key: provider, "aria-disabled": this.disabled ? "true" : undefined, tabindex: this.disabled ? -1 : undefined, onClick: (e) => {
727
+ if (this.disabled) {
728
+ e.preventDefault();
729
+ }
730
+ } }, content));
731
+ }
732
+ return (index.h("button", { type: "button", class: btnClass, part: btnPart, "data-connection-name": provider, "data-strategy": strategy, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "SOCIAL", provider), key: provider }, content));
298
733
  })));
299
734
  }
300
735
  // ===========================================================================
@@ -369,6 +804,14 @@ const AuthheroNode = class {
369
804
  return null;
370
805
  }
371
806
  }
807
+ static get watchers() { return {
808
+ "component": [{
809
+ "componentChanged": 0
810
+ }],
811
+ "value": [{
812
+ "valueChanged": 0
813
+ }]
814
+ }; }
372
815
  };
373
816
  AuthheroNode.style = authheroNodeCss();
374
817