@incodetech/web 0.0.0-dev-20260616-e026f0c8 → 0.0.0-dev-20260616-c6e584de

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.
@@ -1,19 +1,94 @@
1
1
  import { n as useTranslation } from "../i18n-DoP1NB7u.js";
2
- import { _ as y, p as d, v as u } from "../vendor-preact-DThS2ZQ_.js";
2
+ import { _ as y, d as T, l as A, v as u } from "../vendor-preact-DThS2ZQ_.js";
3
3
  import { c as useManager, o as useModuleTerminalCallbacks } from "../hooks-Da_yP_Dr.js";
4
4
  import { t as IncodeComponent } from "../incodeComponent-CCP7GTMj.js";
5
5
  import { r as Spacer } from "../loadingIcon-B0ysgiNq.js";
6
6
  import { t as Page } from "../page-DidH_RkX.js";
7
7
  import "../extensibility-iqAZ2ASV.js";
8
- import { t as Title } from "../typography-BZIpjo97.js";
8
+ import { a as TypographyH5, o as TypographyP } from "../typography-BZIpjo97.js";
9
9
  import { t as Button } from "../button-BMYTQ8fc.js";
10
10
  import "../icons-CJJbIpBq.js";
11
11
  import { t as SuccessIcon } from "../successIcon-B5mGvdx1.js";
12
+ import { t as AutoFocusTitle } from "../autoFocusTitle-CuRu2lPg.js";
12
13
  import { t as VerificationResult } from "../verificationResult-BYhqWnVo.js";
13
14
  import { t as InputComposed } from "../inputComposed-C1R2LAa3.js";
14
15
  import { t as registerIncodeModuleElement } from "../incodeModule-M8DszCee.js";
15
16
  import { MIN_PASSWORD_LENGTH, PASSWORD_VALIDATION_KEYS, REQUIREMENT_I18N_KEYS, createCertificateIssuanceManager } from "@incodetech/core/certificate-issuance";
16
- //#region src/modules/certificate-issuance/passwordRequirements.tsx
17
+ //#region src/modules/certificate-issuance/downloadScreen.tsx
18
+ var DownloadScreen = ({ blob, onDownloaded, onError }) => {
19
+ const { t } = useTranslation();
20
+ const anchorRef = A(null);
21
+ const downloadUrl = T(() => {
22
+ try {
23
+ return URL.createObjectURL(blob);
24
+ } catch {
25
+ return null;
26
+ }
27
+ }, [blob]);
28
+ y(() => {
29
+ return () => {
30
+ if (downloadUrl) URL.revokeObjectURL(downloadUrl);
31
+ };
32
+ }, [downloadUrl]);
33
+ y(() => {
34
+ if (!downloadUrl) onError();
35
+ }, [downloadUrl, onError]);
36
+ if (!downloadUrl) return null;
37
+ const handleDownload = () => {
38
+ anchorRef.current?.click();
39
+ onDownloaded();
40
+ };
41
+ return /* @__PURE__ */ u(Page, {
42
+ className: "IncodeCertificateIssuancePage",
43
+ children: /* @__PURE__ */ u("div", {
44
+ className: "IncodeCertificateIssuanceScreenContent",
45
+ children: [
46
+ /* @__PURE__ */ u(Spacer, {}),
47
+ /* @__PURE__ */ u("div", {
48
+ className: "IncodeCertificateIssuanceScreenArea",
49
+ children: [/* @__PURE__ */ u(AutoFocusTitle, { children: t("certificateIssuance.v2.download.title") }), /* @__PURE__ */ u(TypographyH5, {
50
+ className: "IncodeCertificateIssuanceScreenText",
51
+ children: t("certificateIssuance.v2.download.text")
52
+ })]
53
+ }),
54
+ /* @__PURE__ */ u(Spacer, {}),
55
+ /* @__PURE__ */ u("a", {
56
+ ref: anchorRef,
57
+ href: downloadUrl,
58
+ download: "certificate.cer",
59
+ "aria-label": t("certificateIssuance.download.button"),
60
+ tabIndex: -1,
61
+ hidden: true
62
+ }),
63
+ /* @__PURE__ */ u(Button, {
64
+ onClick: handleDownload,
65
+ children: t("certificateIssuance.download.button")
66
+ })
67
+ ]
68
+ })
69
+ });
70
+ };
71
+ //#endregion
72
+ //#region src/modules/certificate-issuance/password/ellipseIcon.tsx
73
+ var EllipseIcon = ({ size = 16 }) => {
74
+ return /* @__PURE__ */ u("svg", {
75
+ xmlns: "http://www.w3.org/2000/svg",
76
+ width: size,
77
+ height: size,
78
+ viewBox: "0 0 16 16",
79
+ fill: "none",
80
+ "aria-hidden": "true",
81
+ children: [/* @__PURE__ */ u("title", { children: "Ellipse icon" }), /* @__PURE__ */ u("circle", {
82
+ cx: "8",
83
+ cy: "8",
84
+ r: "5.585",
85
+ stroke: "var(--icon-neutral-500)",
86
+ "stroke-width": "1.5"
87
+ })]
88
+ });
89
+ };
90
+ //#endregion
91
+ //#region src/modules/certificate-issuance/password/passwordRequirements.tsx
17
92
  var PasswordRequirements = ({ validations }) => {
18
93
  const { t } = useTranslation();
19
94
  return /* @__PURE__ */ u("ul", {
@@ -28,9 +103,9 @@ var PasswordRequirements = ({ validations }) => {
28
103
  "data-met": passed,
29
104
  children: [
30
105
  /* @__PURE__ */ u("span", {
31
- class: "IncodeCertificateIssuanceRequirementIcon",
32
106
  "aria-hidden": "true",
33
- children: /* @__PURE__ */ u(SuccessIcon, { size: 16 })
107
+ class: "IncodeCertificateIssuanceRequirementIcon",
108
+ children: passed ? /* @__PURE__ */ u(SuccessIcon, { size: 16 }) : /* @__PURE__ */ u(EllipseIcon, {})
34
109
  }),
35
110
  /* @__PURE__ */ u("span", {
36
111
  class: "IncodeCertificateIssuanceRequirementLabel",
@@ -46,56 +121,77 @@ var PasswordRequirements = ({ validations }) => {
46
121
  });
47
122
  };
48
123
  //#endregion
49
- //#region src/modules/certificate-issuance/certificate-issuance.tsx
50
- var CertificateIssuanceDownloadScreen = ({ blob, onFinish }) => {
124
+ //#region src/modules/certificate-issuance/password/passwordScreen.tsx
125
+ var PasswordScreen = ({ password, passwordValidations, canSubmit, onPasswordChange, onSubmit }) => {
51
126
  const { t } = useTranslation();
52
- const [downloadUrl, setDownloadUrl] = d();
53
- y(() => {
54
- const url = URL.createObjectURL(blob);
55
- setDownloadUrl(url);
56
- return () => {
57
- URL.revokeObjectURL(url);
58
- };
59
- }, [blob]);
60
127
  return /* @__PURE__ */ u(Page, {
128
+ title: t("certificateIssuance.password.title"),
129
+ subtitle: t("certificateIssuance.password.description"),
61
130
  className: "IncodeCertificateIssuancePage",
62
- hideFooterBranding: true,
63
131
  children: /* @__PURE__ */ u("div", {
64
- className: "IncodeCertificateIssuanceDownloadContent",
65
- children: [
66
- /* @__PURE__ */ u(SuccessIcon, { size: 64 }),
67
- /* @__PURE__ */ u(Spacer, { size: 16 }),
68
- /* @__PURE__ */ u(Title, { children: t("forms.success") }),
69
- /* @__PURE__ */ u(Spacer, {}),
70
- /* @__PURE__ */ u("div", {
71
- className: "IncodeCertificateIssuanceDownloadArea",
132
+ className: "IncodeCertificateIssuanceContent",
133
+ children: [/* @__PURE__ */ u("div", {
134
+ className: "IncodeCertificateIssuancePasswordSection",
135
+ children: /* @__PURE__ */ u("div", {
136
+ className: "IncodeCertificateIssuancePassword",
72
137
  children: [
73
- /* @__PURE__ */ u(Title, { children: t("certificateIssuance.download.title") }),
74
- /* @__PURE__ */ u("span", {
75
- className: "IncodeCertificateIssuanceDownloadText",
76
- children: t("certificateIssuance.download.text")
138
+ /* @__PURE__ */ u(InputComposed, {
139
+ id: "certificate-password",
140
+ "data-testid": "certificate-password",
141
+ type: "password",
142
+ placeholder: t("certificateIssuance.password.placeholder"),
143
+ value: password,
144
+ autocomplete: "new-password",
145
+ onInput: (e) => {
146
+ onPasswordChange(e.target.value);
147
+ },
148
+ closeButton: {
149
+ show: password.length > 0,
150
+ onClose: () => onPasswordChange("")
151
+ }
77
152
  }),
78
- downloadUrl ? /* @__PURE__ */ u("a", {
79
- class: "IncodeButton IncodeButtonPrimary IncodeButtonL IncodeCertificateIssuanceDownloadButton",
80
- href: downloadUrl,
81
- download: "certificate.cer",
82
- children: t("certificateIssuance.download.button")
83
- }) : /* @__PURE__ */ u(Button, {
84
- disabled: true,
85
- children: t("certificateIssuance.download.button")
86
- })
153
+ /* @__PURE__ */ u(TypographyP, { children: t("certificateIssuance.passwordRequirements.description") }),
154
+ /* @__PURE__ */ u(PasswordRequirements, { validations: passwordValidations })
87
155
  ]
156
+ })
157
+ }), /* @__PURE__ */ u(Button, {
158
+ disabled: !canSubmit,
159
+ onClick: onSubmit,
160
+ children: t("certificateIssuance.continue")
161
+ })]
162
+ })
163
+ });
164
+ };
165
+ //#endregion
166
+ //#region src/modules/certificate-issuance/successScreen.tsx
167
+ var SuccessScreen = ({ onDone }) => {
168
+ const { t } = useTranslation();
169
+ return /* @__PURE__ */ u(Page, {
170
+ className: "IncodeCertificateIssuancePage",
171
+ children: /* @__PURE__ */ u("div", {
172
+ className: "IncodeCertificateIssuanceScreenContent",
173
+ children: [
174
+ /* @__PURE__ */ u(Spacer, {}),
175
+ /* @__PURE__ */ u(SuccessIcon, {}),
176
+ /* @__PURE__ */ u(Spacer, { size: 16 }),
177
+ /* @__PURE__ */ u("div", {
178
+ className: "IncodeCertificateIssuanceScreenArea",
179
+ children: [/* @__PURE__ */ u(AutoFocusTitle, { children: t("certificateIssuance.success.title") }), /* @__PURE__ */ u(TypographyH5, {
180
+ className: "IncodeCertificateIssuanceScreenText",
181
+ children: t("certificateIssuance.success.text")
182
+ })]
88
183
  }),
89
184
  /* @__PURE__ */ u(Spacer, {}),
90
185
  /* @__PURE__ */ u(Button, {
91
- variant: "link",
92
- onClick: onFinish,
93
- children: t("certificateIssuance.download.finish")
186
+ onClick: onDone,
187
+ children: t("certificateIssuance.success.done")
94
188
  })
95
189
  ]
96
190
  })
97
191
  });
98
192
  };
193
+ //#endregion
194
+ //#region src/modules/certificate-issuance/certificate-issuance.tsx
99
195
  var CertificateIssuanceContent = ({ config, manager: externalManager, onFinish }) => {
100
196
  const { t } = useTranslation();
101
197
  const [state, manager] = useManager(() => {
@@ -110,57 +206,35 @@ var CertificateIssuanceContent = ({ config, manager: externalManager, onFinish }
110
206
  onFinish,
111
207
  errorStatuses: []
112
208
  });
113
- if (state.status === "finished") return null;
114
- if (state.status === "idle" || state.status === "processing") return /* @__PURE__ */ u(VerificationResult, {
115
- submittingTitle: t("common.processing"),
116
- submittingSubtitle: t("qes.processing.subtitle"),
117
- status: "submitting",
118
- hideFooterBranding: false
119
- });
120
- if (state.status === "success") return /* @__PURE__ */ u(CertificateIssuanceDownloadScreen, {
121
- blob: state.blob,
122
- onFinish: () => manager.finish()
123
- });
124
- if (state.status === "error") return /* @__PURE__ */ u(VerificationResult, {
125
- failureTitle: t("certificateIssuance.errorTitle"),
126
- status: "failure",
127
- hideFooterBranding: false
128
- });
129
- if (state.status === "password") return /* @__PURE__ */ u(Page, {
130
- title: t("certificateIssuance.password.title"),
131
- subtitle: t("certificateIssuance.password.description"),
132
- className: "IncodeCertificateIssuancePage",
133
- children: /* @__PURE__ */ u("div", {
134
- className: "IncodeCertificateIssuanceContent",
135
- children: [/* @__PURE__ */ u("div", {
136
- className: "IncodeCertificateIssuancePasswordSection",
137
- children: /* @__PURE__ */ u("div", {
138
- className: "IncodeCertificateIssuancePassword",
139
- children: [/* @__PURE__ */ u(InputComposed, {
140
- id: "certificate-password",
141
- "data-testid": "certificate-password",
142
- type: "password",
143
- placeholder: t("certificateIssuance.password.placeholder"),
144
- value: state.password,
145
- autocomplete: "new-password",
146
- onInput: (e) => {
147
- const target = e.target;
148
- manager.setPassword(target.value);
149
- },
150
- closeButton: {
151
- show: state.password.length > 0,
152
- onClose: () => manager.setPassword("")
153
- }
154
- }), /* @__PURE__ */ u(PasswordRequirements, { validations: state.passwordValidations })]
155
- })
156
- }), /* @__PURE__ */ u(Button, {
157
- disabled: !state.canSubmit,
158
- onClick: () => manager.submitPassword(),
159
- children: t("certificateIssuance.continue")
160
- })]
161
- })
162
- });
163
- return null;
209
+ switch (state.status) {
210
+ case "idle":
211
+ case "processing": return /* @__PURE__ */ u(VerificationResult, {
212
+ submittingTitle: t("common.processing"),
213
+ submittingSubtitle: t("qes.processing.subtitle"),
214
+ status: "submitting",
215
+ hideFooterBranding: false
216
+ });
217
+ case "password": return /* @__PURE__ */ u(PasswordScreen, {
218
+ password: state.password,
219
+ passwordValidations: state.passwordValidations,
220
+ canSubmit: state.canSubmit,
221
+ onPasswordChange: (value) => manager.setPassword(value),
222
+ onSubmit: () => manager.submitPassword()
223
+ });
224
+ case "success": return /* @__PURE__ */ u(DownloadScreen, {
225
+ blob: state.blob,
226
+ onDownloaded: () => manager.markDownloaded(),
227
+ onError: () => manager.reportDownloadError()
228
+ });
229
+ case "downloaded": return /* @__PURE__ */ u(SuccessScreen, { onDone: () => manager.finish() });
230
+ case "error": return /* @__PURE__ */ u(VerificationResult, {
231
+ failureTitle: t("certificateIssuance.errorTitle"),
232
+ status: "failure",
233
+ hideFooterBranding: false
234
+ });
235
+ case "finished": return null;
236
+ default: return state;
237
+ }
164
238
  };
165
239
  var CertificateIssuance = ({ config, manager, onFinish }) => {
166
240
  if (!config) return null;
@@ -16,6 +16,7 @@
16
16
 
17
17
  .IncodeCertificateIssuanceContent {
18
18
  margin-top: var(--spacing-32, var(--spacing-32, 32px));
19
+ margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
19
20
  width: 100%;
20
21
  height: 100%;
21
22
  max-width: var(--incode-form-max-w);
@@ -31,14 +32,17 @@
31
32
  }
32
33
 
33
34
  .IncodeCertificateIssuanceContent .IncodeCertificateIssuancePassword {
34
- flex-direction: column;
35
35
  align-items: flex-start;
36
+ gap: var(--spacing-8, var(--spacing-8, 8px));
36
37
  width: 100%;
38
+ color: var(--color-input-text-helper-default, var(--input-text-helper-default));
39
+ flex-direction: column;
37
40
  display: flex;
38
41
  }
39
42
 
40
- .IncodeCertificateIssuanceDownloadContent {
43
+ .IncodeCertificateIssuanceScreenContent {
41
44
  margin-top: var(--spacing-32, var(--spacing-32, 32px));
45
+ margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
42
46
  width: 100%;
43
47
  height: 100%;
44
48
  max-width: var(--incode-form-max-w);
@@ -49,16 +53,14 @@
49
53
  display: flex;
50
54
  }
51
55
 
52
- .IncodeCertificateIssuanceDownloadContent .IncodeCertificateIssuanceDownloadArea {
53
- border-radius: var(--radius-3xl, 1.5rem);
54
- background-color: var(--color-surface-brand-50, var(--surface-brand-50));
55
- padding-inline: var(--spacing-16, var(--spacing-16, 16px));
56
- padding-block: var(--spacing-24, var(--spacing-24, 24px));
56
+ .IncodeCertificateIssuanceScreenContent .IncodeCertificateIssuanceScreenArea {
57
57
  flex-direction: column;
58
+ justify-content: center;
59
+ align-items: center;
58
60
  display: flex;
59
61
  }
60
62
 
61
- .IncodeCertificateIssuanceDownloadContent .IncodeCertificateIssuanceDownloadArea .IncodeCertificateIssuanceDownloadText {
63
+ .IncodeCertificateIssuanceScreenContent .IncodeCertificateIssuanceScreenArea .IncodeCertificateIssuanceScreenText {
62
64
  margin-top: var(--spacing-12, var(--spacing-12, 12px));
63
65
  margin-bottom: var(--spacing-24, var(--spacing-24, 24px));
64
66
  text-align: center;
@@ -71,7 +73,6 @@
71
73
  }
72
74
 
73
75
  .IncodeCertificateIssuanceRequirements {
74
- margin-top: var(--spacing-8, var(--spacing-8, 8px));
75
76
  gap: var(--spacing-8, var(--spacing-8, 8px));
76
77
  flex-direction: column;
77
78
  list-style: none;
@@ -84,13 +85,7 @@
84
85
  display: flex;
85
86
  }
86
87
 
87
- .IncodeCertificateIssuanceRequirement[data-met="false"] .IncodeSuccessIcon path:first-of-type {
88
- fill: var(--icon-neutral-300);
89
- }
90
-
91
88
  .IncodeCertificateIssuanceRequirementIcon {
92
- height: var(--spacing-20, var(--spacing-20, 20px));
93
- width: var(--spacing-20, var(--spacing-20, 20px));
94
89
  flex-shrink: 0;
95
90
  justify-content: center;
96
91
  align-items: center;
@@ -117,15 +112,3 @@
117
112
  position: absolute;
118
113
  overflow: hidden;
119
114
  }
120
-
121
- .IncodeCertificateIssuanceDownloadButton {
122
- text-decoration: none;
123
- }
124
-
125
- .IncodeCertificateIssuanceSuccessCenter {
126
- flex-direction: column;
127
- flex: 1;
128
- justify-content: center;
129
- align-items: center;
130
- display: flex;
131
- }
@@ -8148,6 +8148,7 @@
8148
8148
 
8149
8149
  .IncodeCertificateIssuanceContent {
8150
8150
  margin-top: var(--spacing-32, var(--spacing-32, 32px));
8151
+ margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
8151
8152
  width: 100%;
8152
8153
  height: 100%;
8153
8154
  max-width: var(--incode-form-max-w);
@@ -8163,14 +8164,17 @@
8163
8164
  }
8164
8165
 
8165
8166
  .IncodeCertificateIssuanceContent .IncodeCertificateIssuancePassword {
8166
- flex-direction: column;
8167
8167
  align-items: flex-start;
8168
+ gap: var(--spacing-8, var(--spacing-8, 8px));
8168
8169
  width: 100%;
8170
+ color: var(--color-input-text-helper-default, var(--input-text-helper-default));
8171
+ flex-direction: column;
8169
8172
  display: flex;
8170
8173
  }
8171
8174
 
8172
- .IncodeCertificateIssuanceDownloadContent {
8175
+ .IncodeCertificateIssuanceScreenContent {
8173
8176
  margin-top: var(--spacing-32, var(--spacing-32, 32px));
8177
+ margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
8174
8178
  width: 100%;
8175
8179
  height: 100%;
8176
8180
  max-width: var(--incode-form-max-w);
@@ -8181,16 +8185,14 @@
8181
8185
  display: flex;
8182
8186
  }
8183
8187
 
8184
- .IncodeCertificateIssuanceDownloadContent .IncodeCertificateIssuanceDownloadArea {
8185
- border-radius: var(--radius-3xl, 1.5rem);
8186
- background-color: var(--color-surface-brand-50, var(--surface-brand-50));
8187
- padding-inline: var(--spacing-16, var(--spacing-16, 16px));
8188
- padding-block: var(--spacing-24, var(--spacing-24, 24px));
8188
+ .IncodeCertificateIssuanceScreenContent .IncodeCertificateIssuanceScreenArea {
8189
8189
  flex-direction: column;
8190
+ justify-content: center;
8191
+ align-items: center;
8190
8192
  display: flex;
8191
8193
  }
8192
8194
 
8193
- .IncodeCertificateIssuanceDownloadContent .IncodeCertificateIssuanceDownloadArea .IncodeCertificateIssuanceDownloadText {
8195
+ .IncodeCertificateIssuanceScreenContent .IncodeCertificateIssuanceScreenArea .IncodeCertificateIssuanceScreenText {
8194
8196
  margin-top: var(--spacing-12, var(--spacing-12, 12px));
8195
8197
  margin-bottom: var(--spacing-24, var(--spacing-24, 24px));
8196
8198
  text-align: center;
@@ -8203,7 +8205,6 @@
8203
8205
  }
8204
8206
 
8205
8207
  .IncodeCertificateIssuanceRequirements {
8206
- margin-top: var(--spacing-8, var(--spacing-8, 8px));
8207
8208
  gap: var(--spacing-8, var(--spacing-8, 8px));
8208
8209
  flex-direction: column;
8209
8210
  list-style: none;
@@ -8216,13 +8217,7 @@
8216
8217
  display: flex;
8217
8218
  }
8218
8219
 
8219
- .IncodeCertificateIssuanceRequirement[data-met="false"] .IncodeSuccessIcon path:first-of-type {
8220
- fill: var(--icon-neutral-300);
8221
- }
8222
-
8223
8220
  .IncodeCertificateIssuanceRequirementIcon {
8224
- height: var(--spacing-20, var(--spacing-20, 20px));
8225
- width: var(--spacing-20, var(--spacing-20, 20px));
8226
8221
  flex-shrink: 0;
8227
8222
  justify-content: center;
8228
8223
  align-items: center;
@@ -8250,18 +8245,6 @@
8250
8245
  overflow: hidden;
8251
8246
  }
8252
8247
 
8253
- .IncodeCertificateIssuanceDownloadButton {
8254
- text-decoration: none;
8255
- }
8256
-
8257
- .IncodeCertificateIssuanceSuccessCenter {
8258
- flex-direction: column;
8259
- flex: 1;
8260
- justify-content: center;
8261
- align-items: center;
8262
- display: flex;
8263
- }
8264
-
8265
8248
  .IncodeVerificationResult .IncodePageContent {
8266
8249
  gap: var(--spacing-16, var(--spacing-16, 16px));
8267
8250
  padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@incodetech/web",
3
- "version": "0.0.0-dev-20260616-e026f0c8",
3
+ "version": "0.0.0-dev-20260616-c6e584de",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/IncodeTechnologies/incode-web-sdk.git"
@@ -264,7 +264,7 @@
264
264
  "qrcode": "^1.5.4",
265
265
  "signature_pad": "^5.1.3",
266
266
  "tailwindcss": "^4.1.17",
267
- "@incodetech/core": "0.0.0-dev-20260616-e026f0c8"
267
+ "@incodetech/core": "0.0.0-dev-20260616-c6e584de"
268
268
  },
269
269
  "devDependencies": {
270
270
  "@microsoft/api-extractor": "^7.53.3",