@authhero/widget 0.17.2 → 0.18.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/cjs/authhero-widget.cjs.entry.js +75 -74
- package/dist/collection/index.js +1 -1
- package/dist/collection/themes/index.js +34 -30
- package/dist/collection/utils/branding.js +75 -74
- package/dist/esm/authhero-widget.entry.js +75 -74
- package/dist/types/index.d.ts +1 -1
- package/dist/types/themes/index.d.ts +2 -2
- package/dist/types/utils/branding.d.ts +8 -8
- package/hydrate/index.js +75 -74
- package/hydrate/index.mjs +75 -74
- package/package.json +2 -2
- /package/dist/authhero-widget/{p-409a28d3.entry.js → p-18d0a438.entry.js} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as a,b as e}from"./p-5hZ8Vbm9.js";export{s as setNonce}from"./p-5hZ8Vbm9.js";import{g as t}from"./p-DQuL1Twl.js";(()=>{const e=import.meta.url,t={};return""!==e&&(t.resourcesUrl=new URL(".",e).href),a(t)})().then((async a=>(await t(),e([["p-bb3657ce",[[513,"authhero-node",{component:[16],value:[1],disabled:[4],passwordVisible:[32]}]]],["p-
|
|
1
|
+
import{p as a,b as e}from"./p-5hZ8Vbm9.js";export{s as setNonce}from"./p-5hZ8Vbm9.js";import{g as t}from"./p-DQuL1Twl.js";(()=>{const e=import.meta.url,t={};return""!==e&&(t.resourcesUrl=new URL(".",e).href),a(t)})().then((async a=>(await t(),e([["p-bb3657ce",[[513,"authhero-node",{component:[16],value:[1],disabled:[4],passwordVisible:[32]}]]],["p-18d0a438",[[513,"authhero-widget",{screen:[1],apiUrl:[1,"api-url"],baseUrl:[1,"base-url"],state:[1025],screenId:[1025,"screen-id"],authParams:[1,"auth-params"],statePersistence:[1,"state-persistence"],storageKey:[1,"storage-key"],branding:[1],theme:[1],loading:[1028],autoSubmit:[4,"auto-submit"],autoNavigate:[4,"auto-navigate"],_screen:[32],_authParams:[32],_branding:[32],_theme:[32],formData:[32]},null,{screenId:[{watchScreenId:0}],screen:[{watchScreen:0}],branding:[{watchBranding:0}],theme:[{watchTheme:0}],authParams:[{watchAuthParams:0}]}]]]],a))));
|
|
@@ -14,12 +14,12 @@ function styleToRadius(style, baseRadius) {
|
|
|
14
14
|
if (baseRadius !== undefined)
|
|
15
15
|
return `${baseRadius}px`;
|
|
16
16
|
switch (style) {
|
|
17
|
-
case
|
|
18
|
-
return
|
|
19
|
-
case
|
|
20
|
-
return
|
|
21
|
-
case
|
|
22
|
-
return
|
|
17
|
+
case "pill":
|
|
18
|
+
return "9999px";
|
|
19
|
+
case "rounded":
|
|
20
|
+
return "8px";
|
|
21
|
+
case "sharp":
|
|
22
|
+
return "0";
|
|
23
23
|
default:
|
|
24
24
|
return undefined;
|
|
25
25
|
}
|
|
@@ -33,28 +33,29 @@ function brandingToCssVars(branding) {
|
|
|
33
33
|
const vars = {};
|
|
34
34
|
// Primary color
|
|
35
35
|
if (branding.colors?.primary) {
|
|
36
|
-
vars[
|
|
36
|
+
vars["--ah-color-primary"] = branding.colors.primary;
|
|
37
37
|
// Generate hover variant (slightly darker)
|
|
38
|
-
vars[
|
|
38
|
+
vars["--ah-color-primary-hover"] = branding.colors.primary;
|
|
39
39
|
}
|
|
40
40
|
// Page background
|
|
41
41
|
if (branding.colors?.page_background) {
|
|
42
42
|
const bg = branding.colors.page_background;
|
|
43
|
-
if (bg.type ===
|
|
44
|
-
vars[
|
|
43
|
+
if (bg.type === "solid" && bg.start) {
|
|
44
|
+
vars["--ah-page-bg"] = bg.start;
|
|
45
45
|
}
|
|
46
|
-
else if (bg.type ===
|
|
46
|
+
else if (bg.type === "gradient" && bg.start && bg.end) {
|
|
47
47
|
const angle = bg.angle_deg ?? 180;
|
|
48
|
-
vars[
|
|
48
|
+
vars["--ah-page-bg"] =
|
|
49
|
+
`linear-gradient(${angle}deg, ${bg.start}, ${bg.end})`;
|
|
49
50
|
}
|
|
50
51
|
}
|
|
51
52
|
// Logo URL (stored for reference, used via prop)
|
|
52
53
|
if (branding.logo_url) {
|
|
53
|
-
vars[
|
|
54
|
+
vars["--ah-logo-url"] = `url(${branding.logo_url})`;
|
|
54
55
|
}
|
|
55
56
|
// Font URL
|
|
56
57
|
if (branding.font?.url) {
|
|
57
|
-
vars[
|
|
58
|
+
vars["--ah-font-url"] = branding.font.url;
|
|
58
59
|
}
|
|
59
60
|
return vars;
|
|
60
61
|
}
|
|
@@ -70,29 +71,29 @@ function themeToCssVars(theme) {
|
|
|
70
71
|
const b = theme.borders;
|
|
71
72
|
// Widget
|
|
72
73
|
if (b.widget_corner_radius !== undefined) {
|
|
73
|
-
vars[
|
|
74
|
+
vars["--ah-widget-radius"] = `${b.widget_corner_radius}px`;
|
|
74
75
|
}
|
|
75
76
|
if (b.widget_border_weight !== undefined) {
|
|
76
|
-
vars[
|
|
77
|
+
vars["--ah-widget-border-width"] = `${b.widget_border_weight}px`;
|
|
77
78
|
}
|
|
78
79
|
if (b.show_widget_shadow === false) {
|
|
79
|
-
vars[
|
|
80
|
+
vars["--ah-widget-shadow"] = "none";
|
|
80
81
|
}
|
|
81
82
|
// Buttons
|
|
82
83
|
const btnRadius = styleToRadius(b.buttons_style, b.button_border_radius);
|
|
83
84
|
if (btnRadius) {
|
|
84
|
-
vars[
|
|
85
|
+
vars["--ah-btn-radius"] = btnRadius;
|
|
85
86
|
}
|
|
86
87
|
if (b.button_border_weight !== undefined) {
|
|
87
|
-
vars[
|
|
88
|
+
vars["--ah-btn-border-width"] = `${b.button_border_weight}px`;
|
|
88
89
|
}
|
|
89
90
|
// Inputs
|
|
90
91
|
const inputRadius = styleToRadius(b.inputs_style, b.input_border_radius);
|
|
91
92
|
if (inputRadius) {
|
|
92
|
-
vars[
|
|
93
|
+
vars["--ah-input-radius"] = inputRadius;
|
|
93
94
|
}
|
|
94
95
|
if (b.input_border_weight !== undefined) {
|
|
95
|
-
vars[
|
|
96
|
+
vars["--ah-input-border-width"] = `${b.input_border_weight}px`;
|
|
96
97
|
}
|
|
97
98
|
}
|
|
98
99
|
// Colors
|
|
@@ -100,68 +101,68 @@ function themeToCssVars(theme) {
|
|
|
100
101
|
const c = theme.colors;
|
|
101
102
|
// Primary button
|
|
102
103
|
if (c.primary_button) {
|
|
103
|
-
vars[
|
|
104
|
-
vars[
|
|
104
|
+
vars["--ah-color-primary"] = c.primary_button;
|
|
105
|
+
vars["--ah-color-primary-hover"] = c.primary_button;
|
|
105
106
|
}
|
|
106
107
|
if (c.primary_button_label) {
|
|
107
|
-
vars[
|
|
108
|
+
vars["--ah-btn-primary-text"] = c.primary_button_label;
|
|
108
109
|
}
|
|
109
110
|
// Secondary button
|
|
110
111
|
if (c.secondary_button_border) {
|
|
111
|
-
vars[
|
|
112
|
+
vars["--ah-btn-secondary-border"] = c.secondary_button_border;
|
|
112
113
|
}
|
|
113
114
|
if (c.secondary_button_label) {
|
|
114
|
-
vars[
|
|
115
|
+
vars["--ah-btn-secondary-text"] = c.secondary_button_label;
|
|
115
116
|
}
|
|
116
117
|
// Text colors
|
|
117
118
|
if (c.body_text) {
|
|
118
|
-
vars[
|
|
119
|
+
vars["--ah-color-text"] = c.body_text;
|
|
119
120
|
}
|
|
120
121
|
if (c.header) {
|
|
121
|
-
vars[
|
|
122
|
+
vars["--ah-color-text-header"] = c.header;
|
|
122
123
|
}
|
|
123
124
|
if (c.input_labels_placeholders) {
|
|
124
|
-
vars[
|
|
125
|
-
vars[
|
|
125
|
+
vars["--ah-color-text-label"] = c.input_labels_placeholders;
|
|
126
|
+
vars["--ah-color-text-muted"] = c.input_labels_placeholders;
|
|
126
127
|
}
|
|
127
128
|
if (c.input_filled_text) {
|
|
128
|
-
vars[
|
|
129
|
+
vars["--ah-color-input-text"] = c.input_filled_text;
|
|
129
130
|
}
|
|
130
131
|
// Backgrounds
|
|
131
132
|
if (c.widget_background) {
|
|
132
|
-
vars[
|
|
133
|
+
vars["--ah-color-bg"] = c.widget_background;
|
|
133
134
|
}
|
|
134
135
|
if (c.input_background) {
|
|
135
|
-
vars[
|
|
136
|
+
vars["--ah-color-input-bg"] = c.input_background;
|
|
136
137
|
}
|
|
137
138
|
// Borders
|
|
138
139
|
if (c.widget_border) {
|
|
139
|
-
vars[
|
|
140
|
+
vars["--ah-widget-border-color"] = c.widget_border;
|
|
140
141
|
}
|
|
141
142
|
if (c.input_border) {
|
|
142
|
-
vars[
|
|
143
|
+
vars["--ah-color-border"] = c.input_border;
|
|
143
144
|
}
|
|
144
145
|
// Links
|
|
145
146
|
if (c.links_focused_components) {
|
|
146
|
-
vars[
|
|
147
|
+
vars["--ah-color-link"] = c.links_focused_components;
|
|
147
148
|
}
|
|
148
149
|
// Focus/hover
|
|
149
150
|
if (c.base_focus_color) {
|
|
150
|
-
vars[
|
|
151
|
+
vars["--ah-color-focus-ring"] = c.base_focus_color;
|
|
151
152
|
}
|
|
152
153
|
if (c.base_hover_color) {
|
|
153
|
-
vars[
|
|
154
|
+
vars["--ah-color-primary-hover"] = c.base_hover_color;
|
|
154
155
|
}
|
|
155
156
|
// Semantic colors
|
|
156
157
|
if (c.error) {
|
|
157
|
-
vars[
|
|
158
|
+
vars["--ah-color-error"] = c.error;
|
|
158
159
|
}
|
|
159
160
|
if (c.success) {
|
|
160
|
-
vars[
|
|
161
|
+
vars["--ah-color-success"] = c.success;
|
|
161
162
|
}
|
|
162
163
|
// Icons
|
|
163
164
|
if (c.icons) {
|
|
164
|
-
vars[
|
|
165
|
+
vars["--ah-color-icon"] = c.icons;
|
|
165
166
|
}
|
|
166
167
|
}
|
|
167
168
|
// Fonts
|
|
@@ -170,93 +171,93 @@ function themeToCssVars(theme) {
|
|
|
170
171
|
// reference_text_size is the base font size in pixels (default 16px)
|
|
171
172
|
const baseSize = f.reference_text_size || 16;
|
|
172
173
|
if (f.font_url) {
|
|
173
|
-
vars[
|
|
174
|
+
vars["--ah-font-url"] = f.font_url;
|
|
174
175
|
}
|
|
175
176
|
if (f.reference_text_size) {
|
|
176
|
-
vars[
|
|
177
|
+
vars["--ah-font-size-base"] = `${f.reference_text_size}px`;
|
|
177
178
|
}
|
|
178
179
|
// Title, subtitle, etc. sizes are percentages of the base size
|
|
179
180
|
if (f.title?.size) {
|
|
180
181
|
const titlePx = Math.round((f.title.size / 100) * baseSize);
|
|
181
|
-
vars[
|
|
182
|
+
vars["--ah-font-size-title"] = `${titlePx}px`;
|
|
182
183
|
}
|
|
183
184
|
if (f.subtitle?.size) {
|
|
184
185
|
const subtitlePx = Math.round((f.subtitle.size / 100) * baseSize);
|
|
185
|
-
vars[
|
|
186
|
+
vars["--ah-font-size-subtitle"] = `${subtitlePx}px`;
|
|
186
187
|
}
|
|
187
188
|
if (f.body_text?.size) {
|
|
188
189
|
const bodyPx = Math.round((f.body_text.size / 100) * baseSize);
|
|
189
|
-
vars[
|
|
190
|
+
vars["--ah-font-size-body"] = `${bodyPx}px`;
|
|
190
191
|
}
|
|
191
192
|
if (f.input_labels?.size) {
|
|
192
193
|
const labelPx = Math.round((f.input_labels.size / 100) * baseSize);
|
|
193
|
-
vars[
|
|
194
|
+
vars["--ah-font-size-label"] = `${labelPx}px`;
|
|
194
195
|
}
|
|
195
196
|
if (f.buttons_text?.size) {
|
|
196
197
|
const btnPx = Math.round((f.buttons_text.size / 100) * baseSize);
|
|
197
|
-
vars[
|
|
198
|
+
vars["--ah-font-size-btn"] = `${btnPx}px`;
|
|
198
199
|
}
|
|
199
200
|
if (f.links?.size) {
|
|
200
201
|
const linkPx = Math.round((f.links.size / 100) * baseSize);
|
|
201
|
-
vars[
|
|
202
|
+
vars["--ah-font-size-link"] = `${linkPx}px`;
|
|
202
203
|
}
|
|
203
|
-
if (f.links_style ===
|
|
204
|
-
vars[
|
|
204
|
+
if (f.links_style === "underlined") {
|
|
205
|
+
vars["--ah-link-decoration"] = "underline";
|
|
205
206
|
}
|
|
206
207
|
// Font weights - bold option sets font-weight to 700
|
|
207
208
|
if (f.title?.bold !== undefined) {
|
|
208
|
-
vars[
|
|
209
|
+
vars["--ah-font-weight-title"] = f.title.bold ? "700" : "400";
|
|
209
210
|
}
|
|
210
211
|
if (f.subtitle?.bold !== undefined) {
|
|
211
|
-
vars[
|
|
212
|
+
vars["--ah-font-weight-subtitle"] = f.subtitle.bold ? "700" : "400";
|
|
212
213
|
}
|
|
213
214
|
if (f.body_text?.bold !== undefined) {
|
|
214
|
-
vars[
|
|
215
|
+
vars["--ah-font-weight-body"] = f.body_text.bold ? "700" : "400";
|
|
215
216
|
}
|
|
216
217
|
if (f.input_labels?.bold !== undefined) {
|
|
217
|
-
vars[
|
|
218
|
+
vars["--ah-font-weight-label"] = f.input_labels.bold ? "700" : "400";
|
|
218
219
|
}
|
|
219
220
|
if (f.buttons_text?.bold !== undefined) {
|
|
220
|
-
vars[
|
|
221
|
+
vars["--ah-font-weight-btn"] = f.buttons_text.bold ? "600" : "400";
|
|
221
222
|
}
|
|
222
223
|
if (f.links?.bold !== undefined) {
|
|
223
|
-
vars[
|
|
224
|
+
vars["--ah-font-weight-link"] = f.links.bold ? "700" : "400";
|
|
224
225
|
}
|
|
225
226
|
}
|
|
226
227
|
// Widget settings
|
|
227
228
|
if (theme.widget) {
|
|
228
229
|
const w = theme.widget;
|
|
229
230
|
if (w.header_text_alignment) {
|
|
230
|
-
vars[
|
|
231
|
+
vars["--ah-title-align"] = w.header_text_alignment;
|
|
231
232
|
}
|
|
232
233
|
if (w.logo_height) {
|
|
233
|
-
vars[
|
|
234
|
+
vars["--ah-logo-height"] = `${w.logo_height}px`;
|
|
234
235
|
}
|
|
235
236
|
if (w.logo_position) {
|
|
236
237
|
const positionMap = {
|
|
237
|
-
center:
|
|
238
|
-
left:
|
|
239
|
-
right:
|
|
238
|
+
center: "center",
|
|
239
|
+
left: "flex-start",
|
|
240
|
+
right: "flex-end",
|
|
240
241
|
};
|
|
241
|
-
if (w.logo_position ===
|
|
242
|
-
vars[
|
|
242
|
+
if (w.logo_position === "none") {
|
|
243
|
+
vars["--ah-logo-display"] = "none";
|
|
243
244
|
}
|
|
244
245
|
else {
|
|
245
|
-
vars[
|
|
246
|
+
vars["--ah-logo-align"] = positionMap[w.logo_position] ?? "center";
|
|
246
247
|
}
|
|
247
248
|
}
|
|
248
249
|
if (w.social_buttons_layout) {
|
|
249
250
|
// 'top' means social buttons above fields, 'bottom' means below
|
|
250
251
|
// Divider is always order 1 (middle)
|
|
251
|
-
if (w.social_buttons_layout ===
|
|
252
|
-
vars[
|
|
253
|
-
vars[
|
|
254
|
-
vars[
|
|
252
|
+
if (w.social_buttons_layout === "top") {
|
|
253
|
+
vars["--ah-social-order"] = "0";
|
|
254
|
+
vars["--ah-divider-order"] = "1";
|
|
255
|
+
vars["--ah-fields-order"] = "2";
|
|
255
256
|
}
|
|
256
257
|
else {
|
|
257
|
-
vars[
|
|
258
|
-
vars[
|
|
259
|
-
vars[
|
|
258
|
+
vars["--ah-social-order"] = "2";
|
|
259
|
+
vars["--ah-divider-order"] = "1";
|
|
260
|
+
vars["--ah-fields-order"] = "0";
|
|
260
261
|
}
|
|
261
262
|
}
|
|
262
263
|
}
|
|
@@ -264,10 +265,10 @@ function themeToCssVars(theme) {
|
|
|
264
265
|
if (theme.page_background) {
|
|
265
266
|
const pb = theme.page_background;
|
|
266
267
|
if (pb.background_color) {
|
|
267
|
-
vars[
|
|
268
|
+
vars["--ah-page-bg"] = pb.background_color;
|
|
268
269
|
}
|
|
269
270
|
if (pb.background_image_url) {
|
|
270
|
-
vars[
|
|
271
|
+
vars["--ah-page-bg-image"] = `url(${pb.background_image_url})`;
|
|
271
272
|
}
|
|
272
273
|
}
|
|
273
274
|
return vars;
|
package/dist/collection/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
// Export types for consumers
|
|
2
|
-
export * from
|
|
2
|
+
export * from "./types/components";
|
|
@@ -35,37 +35,41 @@
|
|
|
35
35
|
* ```
|
|
36
36
|
*/
|
|
37
37
|
// Re-export branding utilities
|
|
38
|
-
export { brandingToCssVars, themeToCssVars, mergeThemeVars, applyCssVars, } from
|
|
38
|
+
export { brandingToCssVars, themeToCssVars, mergeThemeVars, applyCssVars, } from "../utils/branding";
|
|
39
39
|
// Theme preset class names
|
|
40
|
-
export const themePresets = [
|
|
40
|
+
export const themePresets = [
|
|
41
|
+
"ah-theme-minimal",
|
|
42
|
+
"ah-theme-rounded",
|
|
43
|
+
"ah-theme-dark",
|
|
44
|
+
];
|
|
41
45
|
// CSS part names for ::part() styling
|
|
42
46
|
export const cssParts = [
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
47
|
+
"container",
|
|
48
|
+
"logo",
|
|
49
|
+
"title",
|
|
50
|
+
"form",
|
|
51
|
+
"links",
|
|
52
|
+
"link",
|
|
53
|
+
"link-wrapper",
|
|
54
|
+
"divider",
|
|
55
|
+
"divider-text",
|
|
56
|
+
"message",
|
|
57
|
+
"message-error",
|
|
58
|
+
"message-success",
|
|
59
|
+
"input-wrapper",
|
|
60
|
+
"label",
|
|
61
|
+
"input",
|
|
62
|
+
"helper-text",
|
|
63
|
+
"error-text",
|
|
64
|
+
"button",
|
|
65
|
+
"button-primary",
|
|
66
|
+
"button-secondary",
|
|
67
|
+
"checkbox-wrapper",
|
|
68
|
+
"checkbox",
|
|
69
|
+
"checkbox-label",
|
|
70
|
+
"image",
|
|
71
|
+
"text-title",
|
|
72
|
+
"text-description",
|
|
73
|
+
"text-error",
|
|
74
|
+
"text-success",
|
|
71
75
|
];
|