digitojs 1.0.1 → 1.2.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/CHANGELOG.md +15 -0
- package/README.md +112 -39
- package/dist/adapters/alpine.d.ts.map +1 -1
- package/dist/adapters/alpine.js +65 -58
- package/dist/adapters/alpine.js.map +1 -1
- package/dist/adapters/react.d.ts +9 -0
- package/dist/adapters/react.d.ts.map +1 -1
- package/dist/adapters/react.js +45 -4
- package/dist/adapters/react.js.map +1 -1
- package/dist/adapters/svelte.d.ts +16 -14
- package/dist/adapters/svelte.d.ts.map +1 -1
- package/dist/adapters/svelte.js +34 -4
- package/dist/adapters/svelte.js.map +1 -1
- package/dist/adapters/vanilla.d.ts.map +1 -1
- package/dist/adapters/vanilla.js +36 -12
- package/dist/adapters/vanilla.js.map +1 -1
- package/dist/adapters/vue.d.ts +2 -0
- package/dist/adapters/vue.d.ts.map +1 -1
- package/dist/adapters/vue.js +35 -4
- package/dist/adapters/vue.js.map +1 -1
- package/dist/adapters/web-component.d.ts +3 -0
- package/dist/adapters/web-component.d.ts.map +1 -1
- package/dist/adapters/web-component.js +37 -12
- package/dist/adapters/web-component.js.map +1 -1
- package/dist/core/index.d.ts +1 -1
- package/dist/core/index.d.ts.map +1 -1
- package/dist/core/index.js +1 -1
- package/dist/core/index.js.map +1 -1
- package/dist/core/machine.d.ts +3 -0
- package/dist/core/machine.d.ts.map +1 -1
- package/dist/core/machine.js +31 -3
- package/dist/core/machine.js.map +1 -1
- package/dist/core/timer.d.ts +8 -0
- package/dist/core/timer.d.ts.map +1 -1
- package/dist/core/timer.js +14 -0
- package/dist/core/timer.js.map +1 -1
- package/dist/core/types.d.ts +30 -2
- package/dist/core/types.d.ts.map +1 -1
- package/dist/digito-wc.min.js +2 -2
- package/dist/digito-wc.min.js.map +3 -3
- package/dist/digito.min.js +1 -1
- package/dist/digito.min.js.map +3 -3
- package/dist/index.d.ts +0 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -1
- package/dist/index.js.map +1 -1
- package/package.json +8 -2
- package/src/adapters/alpine.ts +58 -50
- package/src/adapters/react.tsx +50 -5
- package/src/adapters/svelte.ts +48 -16
- package/src/adapters/vanilla.ts +32 -14
- package/src/adapters/vue.ts +32 -3
- package/src/adapters/web-component.ts +35 -13
- package/src/core/index.ts +1 -1
- package/src/core/machine.ts +31 -3
- package/src/core/timer.ts +15 -0
- package/src/core/types.ts +30 -2
- package/src/index.ts +0 -1
package/dist/core/machine.js
CHANGED
|
@@ -53,6 +53,8 @@ export function createDigito(options = {}) {
|
|
|
53
53
|
// requiring the instance to be recreated. Adapters that pass disabled at
|
|
54
54
|
// construction time still work — the initial value is honoured.
|
|
55
55
|
let disabled = options.disabled ?? false;
|
|
56
|
+
// `readOnly` allows focus/navigation while blocking all slot mutations.
|
|
57
|
+
let readOnly = options.readOnly ?? false;
|
|
56
58
|
let state = {
|
|
57
59
|
slotValues: Array(length).fill(''),
|
|
58
60
|
activeSlot: 0,
|
|
@@ -115,7 +117,7 @@ export function createDigito(options = {}) {
|
|
|
115
117
|
* Out-of-bounds indices are silently ignored to prevent sparse-array corruption.
|
|
116
118
|
*/
|
|
117
119
|
function inputChar(slotIndex, char) {
|
|
118
|
-
if (disabled)
|
|
120
|
+
if (disabled || readOnly)
|
|
119
121
|
return state;
|
|
120
122
|
if (slotIndex < 0 || slotIndex >= length)
|
|
121
123
|
return state;
|
|
@@ -149,7 +151,7 @@ export function createDigito(options = {}) {
|
|
|
149
151
|
* Clears the current slot if filled, otherwise clears the previous slot and moves back.
|
|
150
152
|
*/
|
|
151
153
|
function deleteChar(slotIndex) {
|
|
152
|
-
if (disabled)
|
|
154
|
+
if (disabled || readOnly)
|
|
153
155
|
return state;
|
|
154
156
|
if (slotIndex < 0 || slotIndex >= length)
|
|
155
157
|
return state;
|
|
@@ -180,7 +182,7 @@ export function createDigito(options = {}) {
|
|
|
180
182
|
* paste(0, '84AB91') → filtered='8491', fills slots 0–3, slots 4–5 unchanged
|
|
181
183
|
*/
|
|
182
184
|
function pasteString(cursorSlot, rawText) {
|
|
183
|
-
if (disabled)
|
|
185
|
+
if (disabled || readOnly)
|
|
184
186
|
return state;
|
|
185
187
|
let transformed;
|
|
186
188
|
try {
|
|
@@ -226,6 +228,22 @@ export function createDigito(options = {}) {
|
|
|
226
228
|
notifyCompleteIfReady(slotValues);
|
|
227
229
|
return newState;
|
|
228
230
|
}
|
|
231
|
+
/**
|
|
232
|
+
* Clear the slot at slotIndex without moving focus.
|
|
233
|
+
* Used by the Delete key — differs from deleteChar (backspace) which steps the cursor back.
|
|
234
|
+
* Returns early when the slot is already empty, the field is disabled, or readOnly.
|
|
235
|
+
*/
|
|
236
|
+
function clearSlot(slotIndex) {
|
|
237
|
+
if (disabled || readOnly)
|
|
238
|
+
return state;
|
|
239
|
+
if (slotIndex < 0 || slotIndex >= length)
|
|
240
|
+
return state;
|
|
241
|
+
if (!state.slotValues[slotIndex])
|
|
242
|
+
return state;
|
|
243
|
+
const slotValues = [...state.slotValues];
|
|
244
|
+
slotValues[slotIndex] = '';
|
|
245
|
+
return applyState({ slotValues, activeSlot: slotIndex, isComplete: false });
|
|
246
|
+
}
|
|
229
247
|
/** Set or clear the error state. Triggers haptic feedback when setting. */
|
|
230
248
|
function setError(isError) {
|
|
231
249
|
if (isError && haptic)
|
|
@@ -261,6 +279,13 @@ export function createDigito(options = {}) {
|
|
|
261
279
|
function setDisabled(value) {
|
|
262
280
|
disabled = value;
|
|
263
281
|
}
|
|
282
|
+
/**
|
|
283
|
+
* Toggle readOnly at runtime. When `true`, all slot mutations are blocked
|
|
284
|
+
* but navigation and focus remain fully functional.
|
|
285
|
+
*/
|
|
286
|
+
function setReadOnly(value) {
|
|
287
|
+
readOnly = value;
|
|
288
|
+
}
|
|
264
289
|
/**
|
|
265
290
|
* Subscribe to state changes. The listener is called after every mutation
|
|
266
291
|
* with a shallow copy of the new state.
|
|
@@ -285,6 +310,7 @@ export function createDigito(options = {}) {
|
|
|
285
310
|
// Input actions
|
|
286
311
|
inputChar,
|
|
287
312
|
deleteChar,
|
|
313
|
+
clearSlot,
|
|
288
314
|
moveFocusLeft,
|
|
289
315
|
moveFocusRight,
|
|
290
316
|
pasteString,
|
|
@@ -304,6 +330,8 @@ export function createDigito(options = {}) {
|
|
|
304
330
|
* Navigation actions are always allowed.
|
|
305
331
|
*/
|
|
306
332
|
setDisabled,
|
|
333
|
+
/** Toggle readOnly at runtime. Blocks mutations, preserves navigation. */
|
|
334
|
+
setReadOnly,
|
|
307
335
|
/** Returns the current joined code string. */
|
|
308
336
|
getCode: () => joinSlots(state.slotValues),
|
|
309
337
|
/**
|
package/dist/core/machine.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"machine.js","sourceRoot":"","sources":["../../src/core/machine.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"machine.js","sourceRoot":"","sources":["../../src/core/machine.ts"],"names":[],"mappings":"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"}
|
package/dist/core/timer.d.ts
CHANGED
|
@@ -21,4 +21,12 @@ import type { TimerOptions, TimerControls } from './types.js';
|
|
|
21
21
|
* Used by the vanilla adapter's "Resend" button to reset the countdown.
|
|
22
22
|
*/
|
|
23
23
|
export declare function createTimer(options: TimerOptions): TimerControls;
|
|
24
|
+
/**
|
|
25
|
+
* Format a second count as a `m:ss` countdown string (e.g. `"1:05"`, `"0:30"`).
|
|
26
|
+
* Used by the vanilla, alpine, and web-component adapters for their built-in timer UI.
|
|
27
|
+
*
|
|
28
|
+
* @example formatCountdown(65) → "1:05"
|
|
29
|
+
* @example formatCountdown(9) → "0:09"
|
|
30
|
+
*/
|
|
31
|
+
export declare function formatCountdown(totalSeconds: number): string;
|
|
24
32
|
//# sourceMappingURL=timer.d.ts.map
|
package/dist/core/timer.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timer.d.ts","sourceRoot":"","sources":["../../src/core/timer.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE7D;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,YAAY,GAAG,aAAa,CAkDhE"}
|
|
1
|
+
{"version":3,"file":"timer.d.ts","sourceRoot":"","sources":["../../src/core/timer.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE7D;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,YAAY,GAAG,aAAa,CAkDhE;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAM5D"}
|
package/dist/core/timer.js
CHANGED
|
@@ -64,4 +64,18 @@ export function createTimer(options) {
|
|
|
64
64
|
}
|
|
65
65
|
return { start, stop, reset, restart };
|
|
66
66
|
}
|
|
67
|
+
/**
|
|
68
|
+
* Format a second count as a `m:ss` countdown string (e.g. `"1:05"`, `"0:30"`).
|
|
69
|
+
* Used by the vanilla, alpine, and web-component adapters for their built-in timer UI.
|
|
70
|
+
*
|
|
71
|
+
* @example formatCountdown(65) → "1:05"
|
|
72
|
+
* @example formatCountdown(9) → "0:09"
|
|
73
|
+
*/
|
|
74
|
+
export function formatCountdown(totalSeconds) {
|
|
75
|
+
const minutes = Math.floor(totalSeconds / 60);
|
|
76
|
+
const seconds = totalSeconds % 60;
|
|
77
|
+
return minutes > 0
|
|
78
|
+
? `${minutes}:${String(seconds).padStart(2, '0')}`
|
|
79
|
+
: `0:${String(seconds).padStart(2, '0')}`;
|
|
80
|
+
}
|
|
67
81
|
//# sourceMappingURL=timer.js.map
|
package/dist/core/timer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timer.js","sourceRoot":"","sources":["../../src/core/timer.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,WAAW,CAAC,OAAqB;IAC/C,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAA;IAElD,IAAI,gBAAgB,GAAG,YAAY,CAAA;IACnC,IAAI,UAAU,GAA0C,IAAI,CAAA;IAE5D,2DAA2D;IAC3D,SAAS,IAAI;QACX,IAAI,UAAU,KAAK,IAAI,EAAE,CAAC;YACxB,aAAa,CAAC,UAAU,CAAC,CAAA;YACzB,UAAU,GAAG,IAAI,CAAA;QACnB,CAAC;IACH,CAAC;IAED,4FAA4F;IAC5F,SAAS,KAAK;QACZ,IAAI,EAAE,CAAA;QACN,gBAAgB,GAAG,YAAY,CAAA;IACjC,CAAC;IAED;;;OAGG;IACH,SAAS,KAAK;QACZ,IAAI,EAAE,CAAA;QACN,wEAAwE;QACxE,6EAA6E;QAC7E,qEAAqE;QACrE,IAAI,YAAY,IAAI,CAAC,EAAE,CAAC;YACtB,QAAQ,EAAE,EAAE,CAAA;YACZ,OAAM;QACR,CAAC;QACD,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;YAC5B,gBAAgB,IAAI,CAAC,CAAA;YACrB,MAAM,EAAE,CAAC,gBAAgB,CAAC,CAAA;YAC1B,IAAI,gBAAgB,IAAI,CAAC,EAAE,CAAC;gBAC1B,IAAI,EAAE,CAAA;gBACN,QAAQ,EAAE,EAAE,CAAA;YACd,CAAC;QACH,CAAC,EAAE,IAAI,CAAC,CAAA;IACV,CAAC;IAED,6DAA6D;IAC7D,SAAS,OAAO;QACd,KAAK,EAAE,CAAA;QACP,KAAK,EAAE,CAAA;IACT,CAAC;IAED,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,CAAA;AACxC,CAAC"}
|
|
1
|
+
{"version":3,"file":"timer.js","sourceRoot":"","sources":["../../src/core/timer.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,WAAW,CAAC,OAAqB;IAC/C,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAA;IAElD,IAAI,gBAAgB,GAAG,YAAY,CAAA;IACnC,IAAI,UAAU,GAA0C,IAAI,CAAA;IAE5D,2DAA2D;IAC3D,SAAS,IAAI;QACX,IAAI,UAAU,KAAK,IAAI,EAAE,CAAC;YACxB,aAAa,CAAC,UAAU,CAAC,CAAA;YACzB,UAAU,GAAG,IAAI,CAAA;QACnB,CAAC;IACH,CAAC;IAED,4FAA4F;IAC5F,SAAS,KAAK;QACZ,IAAI,EAAE,CAAA;QACN,gBAAgB,GAAG,YAAY,CAAA;IACjC,CAAC;IAED;;;OAGG;IACH,SAAS,KAAK;QACZ,IAAI,EAAE,CAAA;QACN,wEAAwE;QACxE,6EAA6E;QAC7E,qEAAqE;QACrE,IAAI,YAAY,IAAI,CAAC,EAAE,CAAC;YACtB,QAAQ,EAAE,EAAE,CAAA;YACZ,OAAM;QACR,CAAC;QACD,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;YAC5B,gBAAgB,IAAI,CAAC,CAAA;YACrB,MAAM,EAAE,CAAC,gBAAgB,CAAC,CAAA;YAC1B,IAAI,gBAAgB,IAAI,CAAC,EAAE,CAAC;gBAC1B,IAAI,EAAE,CAAA;gBACN,QAAQ,EAAE,EAAE,CAAA;YACd,CAAC;QACH,CAAC,EAAE,IAAI,CAAC,CAAA;IACV,CAAC;IAED,6DAA6D;IAC7D,SAAS,OAAO;QACd,KAAK,EAAE,CAAA;QACP,KAAK,EAAE,CAAA;IACT,CAAC;IAED,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,CAAA;AACxC,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,eAAe,CAAC,YAAoB;IAClD,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,EAAE,CAAC,CAAA;IAC7C,MAAM,OAAO,GAAG,YAAY,GAAG,EAAE,CAAA;IACjC,OAAO,OAAO,GAAG,CAAC;QAChB,CAAC,CAAC,GAAG,OAAO,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE;QAClD,CAAC,CAAC,KAAK,MAAM,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAA;AAC7C,CAAC"}
|
package/dist/core/types.d.ts
CHANGED
|
@@ -37,11 +37,25 @@ export type DigitoOptions = {
|
|
|
37
37
|
resendAfter?: number;
|
|
38
38
|
/** Called with the joined code string when all slots are filled. */
|
|
39
39
|
onComplete?: (code: string) => void;
|
|
40
|
-
/**
|
|
40
|
+
/**
|
|
41
|
+
* Called every second with the remaining seconds. Use to drive a custom timer UI.
|
|
42
|
+
*
|
|
43
|
+
* **Adapter note:** Only fires in adapters that include a built-in countdown timer
|
|
44
|
+
* (vanilla, alpine, web component). In React, Vue, and Svelte the timer is managed
|
|
45
|
+
* separately inside each adapter — pass `onTick` as part of those adapters' options.
|
|
46
|
+
* Has no effect when passed directly to `createDigito`.
|
|
47
|
+
*/
|
|
41
48
|
onTick?: (remainingSeconds: number) => void;
|
|
42
49
|
/** Called when the countdown reaches zero. */
|
|
43
50
|
onExpire?: () => void;
|
|
44
|
-
/**
|
|
51
|
+
/**
|
|
52
|
+
* Called when the resend action is triggered.
|
|
53
|
+
*
|
|
54
|
+
* **Adapter note:** Only fires automatically in adapters with a built-in Resend button
|
|
55
|
+
* (vanilla, alpine, web component). In React, Vue, and Svelte there is no built-in
|
|
56
|
+
* Resend button — call `onResend` manually in your own UI handler.
|
|
57
|
+
* Has no effect when passed directly to `createDigito`.
|
|
58
|
+
*/
|
|
45
59
|
onResend?: () => void;
|
|
46
60
|
/** Vibrate on completion and error via `navigator.vibrate`. Default: `true`. */
|
|
47
61
|
haptic?: boolean;
|
|
@@ -124,6 +138,20 @@ export type DigitoOptions = {
|
|
|
124
138
|
* Default: `false`.
|
|
125
139
|
*/
|
|
126
140
|
blurOnComplete?: boolean;
|
|
141
|
+
/**
|
|
142
|
+
* Uncontrolled initial value applied once on mount.
|
|
143
|
+
* Distributed across slots exactly like user input but does NOT trigger
|
|
144
|
+
* `onComplete` or fire change events. Ignored when a `value` prop is present.
|
|
145
|
+
* Default: `undefined` (no pre-fill).
|
|
146
|
+
*/
|
|
147
|
+
defaultValue?: string;
|
|
148
|
+
/**
|
|
149
|
+
* When `true`, all slot mutations (typing, backspace, delete, paste) are
|
|
150
|
+
* blocked while focus, selection, arrow navigation, and copy remain allowed.
|
|
151
|
+
* Semantically distinct from `disabled` — the field is readable and focusable.
|
|
152
|
+
* Default: `false`.
|
|
153
|
+
*/
|
|
154
|
+
readOnly?: boolean;
|
|
127
155
|
/**
|
|
128
156
|
* Called when the user types or pastes a character that is rejected by the
|
|
129
157
|
* current `type` or `pattern` filter.
|
package/dist/core/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/core/types.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,mDAAmD;AACnD,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,cAAc,GAAG,KAAK,CAAA;AAEvE,4DAA4D;AAC5D,MAAM,MAAM,WAAW,GAAG;IACxB,+DAA+D;IAC/D,UAAU,EAAG,MAAM,EAAE,CAAA;IACrB,2CAA2C;IAC3C,UAAU,EAAG,MAAM,CAAA;IACnB,wCAAwC;IACxC,QAAQ,EAAK,OAAO,CAAA;IACpB,uDAAuD;IACvD,UAAU,EAAG,OAAO,CAAA;IACpB;;;;OAIG;IACH,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,sEAAsE;AACtE,MAAM,MAAM,aAAa,GAAG;IAC1B,2CAA2C;IAC3C,MAAM,CAAC,EAAQ,MAAM,CAAA;IACrB,iEAAiE;IACjE,IAAI,CAAC,EAAU,SAAS,CAAA;IACxB,2EAA2E;IAC3E,KAAK,CAAC,EAAS,MAAM,CAAA;IACrB,8EAA8E;IAC9E,WAAW,CAAC,EAAG,MAAM,CAAA;IACrB,oEAAoE;IACpE,UAAU,CAAC,EAAI,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/core/types.ts"],"names":[],"mappings":"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"}
|
package/dist/digito-wc.min.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*! Digito v1.0.0 | MIT | Olawale Balo — Product Designer + Design Engineer */
|
|
2
|
-
"use strict";(()=>{var
|
|
2
|
+
"use strict";(()=>{var rt=Object.defineProperty,at=Object.defineProperties;var lt=Object.getOwnPropertyDescriptors;var tt=Object.getOwnPropertySymbols;var dt=Object.prototype.hasOwnProperty,ct=Object.prototype.propertyIsEnumerable;var et=(i,d,t)=>d in i?rt(i,d,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[d]=t,O=(i,d)=>{for(var t in d||(d={}))dt.call(d,t)&&et(i,t,d[t]);if(tt)for(var t of tt(d))ct.call(d,t)&&et(i,t,d[t]);return i},j=(i,d)=>at(i,lt(d));function N(i,d,t){if(!i||i.length!==1)return"";if(t!==void 0)return t.global&&(t.lastIndex=0),t.test(i)?i:"";switch(d){case"numeric":return/^[0-9]$/.test(i)?i:"";case"alphabet":return/^[a-zA-Z]$/.test(i)?i:"";case"alphanumeric":return/^[a-zA-Z0-9]$/.test(i)?i:"";case"any":return i;default:return""}}function L(i,d,t){return Array.from(i).filter(e=>N(e,d,t)!=="").join("")}function q(i){let{totalSeconds:d,onTick:t,onExpire:e}=i,s=d,r=null;function h(){r!==null&&(clearInterval(r),r=null)}function g(){h(),s=d}function S(){if(h(),d<=0){e==null||e();return}r=setInterval(()=>{s-=1,t==null||t(s),s<=0&&(h(),e==null||e())},1e3)}function a(){g(),S()}return{start:S,stop:h,reset:g,restart:a}}function k(i){let d=Math.floor(i/60),t=i%60;return d>0?`${d}:${String(t).padStart(2,"0")}`:`0:${String(t).padStart(2,"0")}`}function X(){var i;try{(i=navigator==null?void 0:navigator.vibrate)==null||i.call(navigator,10)}catch(d){}}function it(){try{let i=new AudioContext,d=i.createOscillator(),t=i.createGain();d.connect(t),t.connect(i.destination),d.frequency.value=880,t.gain.setValueAtTime(.08,i.currentTime),t.gain.exponentialRampToValueAtTime(.001,i.currentTime+.08),d.start(),d.stop(i.currentTime+.08),d.onended=()=>{i.close().catch(()=>{})}}catch(i){}}function Z(i){return i.every(d=>d.length===1)}function H(i,d,t){return Math.max(d,Math.min(t,i))}function st(i){return i.join("")}function G(i={}){var K,W,Y,J;let d=(K=i.length)!=null?K:6,t=isNaN(d)?6:Math.max(1,Math.floor(d)),{type:e="numeric",pattern:s,onComplete:r,onInvalidChar:h,haptic:g=!0,sound:S=!1,pasteTransformer:a}=i,l=(W=i.disabled)!=null?W:!1,u=(Y=i.readOnly)!=null?Y:!1,o={slotValues:Array(t).fill(""),activeSlot:0,hasError:!1,isComplete:!1,timerSeconds:(J=i.timer)!=null?J:0},w=new Set;function f(n){if(o=O(O({},o),n),w.size>0){let v=j(O({},o),{slotValues:[...o.slotValues]});w.forEach(E=>E(v))}return o}let b=null;function c(n){if(!Z(n)||!r)return;g&&X(),S&&it();let v=st(n);b!==null&&clearTimeout(b),b=setTimeout(()=>{b=null,r(v)},10)}function V(){b!==null&&(clearTimeout(b),b=null)}function I(n,v){if(l||u||n<0||n>=t)return o;let E=N(v,e,s);if(!E)return v.length===1&&(h==null||h(v,n)),o.activeSlot!==n?f({activeSlot:n}):o;let A=[...o.slotValues];A[n]=E;let R=n<t-1?n+1:t-1,M=f({slotValues:A,activeSlot:R,hasError:!1,isComplete:Z(A)});return c(A),M}function B(n){if(l||u||n<0||n>=t)return o;let v=[...o.slotValues];if(v[n])return v[n]="",f({slotValues:v,activeSlot:n,isComplete:!1});let E=H(n-1,0,t-1);return v[E]="",f({slotValues:v,activeSlot:E,isComplete:!1})}function z(n){return f({activeSlot:H(n-1,0,t-1)})}function m(n){return f({activeSlot:H(n+1,0,t-1)})}function p(n,v){if(l||u)return o;let E;try{E=a?a(v):v}catch(_){console.warn("[digito] pasteTransformer threw \u2014 using raw paste text.",_),E=v}if(h&&E){let _=n;for(let U of Array.from(E))N(U,e,s)?_=(_+1)%t:h(U,_)}let A=L(E,e,s);if(!A)return o;let R=[...o.slotValues],M=n;for(let _=0;_<A.length&&_<t;_++)R[M]=A[_],M=(M+1)%t;let Q=Math.min(A.length,t),nt=Q>=t?t-1:(n+Q)%t,ot=f({slotValues:R,activeSlot:nt,hasError:!1,isComplete:Z(R)});return c(R),ot}function y(n){if(l||u||n<0||n>=t||!o.slotValues[n])return o;let v=[...o.slotValues];return v[n]="",f({slotValues:v,activeSlot:n,isComplete:!1})}function C(n){return n&&g&&X(),f({hasError:n})}function F(){var n;return b!==null&&(clearTimeout(b),b=null),f({slotValues:Array(t).fill(""),activeSlot:0,hasError:!1,isComplete:!1,timerSeconds:(n=i.timer)!=null?n:0})}function x(n){return f({activeSlot:H(n,0,t-1)})}function D(n){l=n}function T(n){u=n}function P(n){return w.add(n),()=>{w.delete(n)}}return{get state(){return o},inputChar:I,deleteChar:B,clearSlot:y,moveFocusLeft:z,moveFocusRight:m,pasteString:p,setError:C,resetState:F,moveFocusTo:x,cancelPendingComplete:V,setDisabled:D,setReadOnly:T,getCode:()=>st(o.slotValues),getSnapshot:()=>j(O({},o),{slotValues:[...o.slotValues]}),subscribe:P,getState:()=>j(O({},o),{slotValues:[...o.slotValues]})}}var ut=`
|
|
3
3
|
:host {
|
|
4
4
|
display: inline-block;
|
|
5
5
|
position: relative;
|
|
@@ -153,7 +153,7 @@
|
|
|
153
153
|
}
|
|
154
154
|
.digito-wc-resend-btn:hover { background: #E5E5E5; }
|
|
155
155
|
.digito-wc-resend-btn:disabled { color: #A1A1A1; cursor: not-allowed; background: #F5F5F5; }
|
|
156
|
-
`;function I(i){let a=Math.floor(i/60),t=i%60;return a>0?`${a}:${String(t).padStart(2,"0")}`:`0:${String(t).padStart(2,"0")}`}var $=class extends HTMLElement{constructor(){super();this.slotEls=[];this.caretEls=[];this.hiddenInput=null;this.timerEl=null;this.timerBadgeEl=null;this.resendEl=null;this.timerCtrl=null;this.resendCountdown=null;this.digito=null;this._isDisabled=!1;this._isSuccess=!1;this._pattern=void 0;this._pasteTransformer=void 0;this._onComplete=void 0;this._onResend=void 0;this._onFocus=void 0;this._onBlur=void 0;this._onInvalidChar=void 0;this.shadow=this.attachShadow({mode:"open"})}set onComplete(t){if(t!==void 0&&typeof t!="function"){console.warn("[digito] onComplete must be a function, got:",typeof t);return}this._onComplete=t}set onResend(t){if(t!==void 0&&typeof t!="function"){console.warn("[digito] onResend must be a function, got:",typeof t);return}this._onResend=t}set onFocus(t){if(t!==void 0&&typeof t!="function"){console.warn("[digito] onFocus must be a function, got:",typeof t);return}this._onFocus=t}set onBlur(t){if(t!==void 0&&typeof t!="function"){console.warn("[digito] onBlur must be a function, got:",typeof t);return}this._onBlur=t}set onInvalidChar(t){if(t!==void 0&&typeof t!="function"){console.warn("[digito] onInvalidChar must be a function, got:",typeof t);return}this._onInvalidChar=t,this.shadow.children.length>0&&this.build()}set pattern(t){if(t!==void 0&&!(t instanceof RegExp)){console.warn("[digito] pattern must be a RegExp, got:",typeof t);return}this._pattern=t,this.shadow.children.length>0&&this.build()}set pasteTransformer(t){if(t!==void 0&&typeof t!="function"){console.warn("[digito] pasteTransformer must be a function, got:",typeof t);return}this._pasteTransformer=t,this.shadow.children.length>0&&this.build()}connectedCallback(){this.build()}disconnectedCallback(){var t,e,s;(t=this.timerCtrl)==null||t.stop(),(e=this.resendCountdown)==null||e.stop(),(s=this.digito)==null||s.resetState()}attributeChangedCallback(){this.shadow.children.length>0&&this.build()}get _length(){var e;let t=parseInt((e=this.getAttribute("length"))!=null?e:"6",10);return isNaN(t)||t<1?6:Math.floor(t)}get _type(){var t;return(t=this.getAttribute("type"))!=null?t:"numeric"}get _timer(){var e;let t=parseInt((e=this.getAttribute("timer"))!=null?e:"0",10);return isNaN(t)||t<0?0:Math.floor(t)}get _resendAfter(){var e;let t=parseInt((e=this.getAttribute("resend-after"))!=null?e:"30",10);return isNaN(t)||t<1?30:Math.floor(t)}get _disabledAttr(){return this.hasAttribute("disabled")}get _separatorAfter(){let t=this.getAttribute("separator-after");return t?t.split(",").map(e=>parseInt(e.trim(),10)).filter(e=>!isNaN(e)&&e>0):[]}get _separator(){var t;return(t=this.getAttribute("separator"))!=null?t:"\u2014"}get _masked(){return this.hasAttribute("masked")}get _maskChar(){var t;return(t=this.getAttribute("mask-char"))!=null?t:"\u25CF"}get _name(){var t;return(t=this.getAttribute("name"))!=null?t:""}get _placeholder(){var t;return(t=this.getAttribute("placeholder"))!=null?t:""}get _autoFocus(){return!this.hasAttribute("auto-focus")||this.getAttribute("auto-focus")!=="false"}get _selectOnFocus(){return this.hasAttribute("select-on-focus")}get _blurOnComplete(){return this.hasAttribute("blur-on-complete")}build(){var N,B,V;let t=this._length,e=this._type,s=this._timer,o=this._resendAfter,u=this._separatorAfter,h=this._separator,S=this._masked,l=this._name,d=this._autoFocus,n=this._selectOnFocus,p=this._blurOnComplete;for(this._isDisabled=this._disabledAttr,(N=this.timerCtrl)==null||N.stop(),(B=this.resendCountdown)==null||B.stop(),(V=this.digito)==null||V.resetState();this.shadow.firstChild;)this.shadow.removeChild(this.shadow.firstChild);this.slotEls=[],this.caretEls=[],this.timerEl=null,this.timerBadgeEl=null,this.resendEl=null,this.timerCtrl=null,this.resendCountdown=null;let b=document.createElement("style");b.textContent=at,this.shadow.appendChild(b);let g=document.createElement("div");g.className="digito-wc-root";let w=document.createElement("div");w.className="digito-wc-slots";for(let y=0;y<t;y++){let m=document.createElement("div");m.className="digito-wc-slot",m.setAttribute("aria-hidden","true");let f=document.createElement("div");if(f.className="digito-wc-caret",m.appendChild(f),this.caretEls.push(f),this.slotEls.push(m),w.appendChild(m),u.some(E=>y===E-1)){let E=document.createElement("div");E.className="digito-wc-separator",E.textContent=h,E.setAttribute("aria-hidden","true"),w.appendChild(E)}}let c=document.createElement("input");if(c.type=S?"password":"text",c.inputMode=e==="numeric"?"numeric":"text",c.autocomplete="one-time-code",c.maxLength=t,c.disabled=this._isDisabled,c.className="digito-wc-hidden",c.setAttribute("aria-label",`Enter your ${t}-${e==="numeric"?"digit":"character"} code`),c.setAttribute("spellcheck","false"),c.setAttribute("autocorrect","off"),c.setAttribute("autocapitalize","off"),l&&(c.name=l),this.hiddenInput=c,g.appendChild(w),g.appendChild(c),this.shadow.appendChild(g),this.digito=Z({length:t,type:e,pattern:this._pattern,pasteTransformer:this._pasteTransformer,onInvalidChar:this._onInvalidChar,onComplete:y=>{var m;(m=this._onComplete)==null||m.call(this,y),this.dispatchEvent(new CustomEvent("complete",{detail:{code:y},bubbles:!0,composed:!0}))}}),s>0){let y=document.createElement("div");y.className="digito-wc-timer",this.timerEl=y;let m=document.createElement("span");m.className="digito-wc-timer-label",m.textContent="Code expires in";let f=document.createElement("span");f.className="digito-wc-timer-badge",f.textContent=I(s),this.timerBadgeEl=f,y.appendChild(m),y.appendChild(f),g.appendChild(y);let E=document.createElement("div");E.className="digito-wc-resend",this.resendEl=E;let F=document.createElement("span");F.textContent="Didn\u2019t receive the code?";let x=document.createElement("button");x.className="digito-wc-resend-btn",x.textContent="Resend",x.type="button",E.appendChild(F),E.appendChild(x),g.appendChild(E),this.timerCtrl=q({totalSeconds:s,onTick:_=>{this.timerBadgeEl&&(this.timerBadgeEl.textContent=I(_))},onExpire:()=>{this.timerEl&&(this.timerEl.style.display="none"),this.resendEl&&this.resendEl.classList.add("is-visible"),this.dispatchEvent(new CustomEvent("expire",{bubbles:!0,composed:!0}))}}),this.timerCtrl.start(),x.addEventListener("click",()=>{var _,D;!this.timerEl||!this.timerBadgeEl||!this.resendEl||(this.resendEl.classList.remove("is-visible"),this.timerEl.style.display="flex",this.timerBadgeEl.textContent=I(o),(_=this.resendCountdown)==null||_.stop(),this.resendCountdown=q({totalSeconds:o,onTick:z=>{this.timerBadgeEl&&(this.timerBadgeEl.textContent=I(z))},onExpire:()=>{this.timerEl&&(this.timerEl.style.display="none"),this.resendEl&&this.resendEl.classList.add("is-visible")}}),this.resendCountdown.start(),(D=this._onResend)==null||D.call(this))})}this.attachEvents(n,p),this._isDisabled&&this.applyDisabledDOM(!0),c.addEventListener("click",y=>{var F,x,_;if(this._isDisabled)return;let m=this.slotEls.length-1;for(let D=0;D<this.slotEls.length;D++)if(y.clientX<=this.slotEls[D].getBoundingClientRect().right){m=D;break}let f=Math.min(m,c.value.length);(F=this.digito)==null||F.moveFocusTo(f);let E=(_=(x=this.digito)==null?void 0:x.state.slotValues[f])!=null?_:"";n&&E?c.setSelectionRange(f,f+1):c.setSelectionRange(f,f),this.syncSlotsToDOM()}),requestAnimationFrame(()=>{!this._isDisabled&&d&&c.focus(),c.setSelectionRange(0,0),this.syncSlotsToDOM()})}syncSlotsToDOM(){if(!this.digito||!this.hiddenInput)return;let{slotValues:t,activeSlot:e,hasError:s}=this.digito.state,o=this.shadow.activeElement===this.hiddenInput;this.slotEls.forEach((h,S)=>{var p;let l=(p=t[S])!=null?p:"",d=S===e&&o,n=h.childNodes[1];(!n||n.nodeType!==Node.TEXT_NODE)&&(n=document.createTextNode(""),h.appendChild(n)),n.nodeValue=this._masked&&l?this._maskChar:l||this._placeholder,h.classList.toggle("is-active",d&&!this._isDisabled),h.classList.toggle("is-filled",!!l),h.classList.toggle("is-masked",this._masked),h.classList.toggle("is-error",s),h.classList.toggle("is-success",this._isSuccess),h.classList.toggle("is-disabled",this._isDisabled),this.caretEls[S].style.display=d&&!l&&!this._isDisabled?"block":"none"});let u=t.join("");this.hiddenInput.value!==u&&(this.hiddenInput.value=u)}applyDisabledDOM(t){this.hiddenInput&&(this.hiddenInput.disabled=t),this.slotEls.forEach(e=>e.classList.toggle("is-disabled",t))}attachEvents(t,e){let s=this.hiddenInput,o=this.digito,u=this._length,h=this._type,S=this._pattern;s.addEventListener("keydown",l=>{var n;if(this._isDisabled)return;let d=(n=s.selectionStart)!=null?n:0;if(l.key==="Backspace"){l.preventDefault(),o.deleteChar(d),this.syncSlotsToDOM(),this.dispatchChange();let p=o.state.activeSlot;requestAnimationFrame(()=>s.setSelectionRange(p,p))}else if(l.key==="ArrowLeft")l.preventDefault(),o.moveFocusLeft(d),this.syncSlotsToDOM(),requestAnimationFrame(()=>s.setSelectionRange(o.state.activeSlot,o.state.activeSlot));else if(l.key==="ArrowRight")l.preventDefault(),o.moveFocusRight(d),this.syncSlotsToDOM(),requestAnimationFrame(()=>s.setSelectionRange(o.state.activeSlot,o.state.activeSlot));else if(l.key==="Tab"){if(l.shiftKey){if(d===0)return;l.preventDefault(),o.moveFocusLeft(d)}else{if(!o.state.slotValues[d]||d>=u-1)return;l.preventDefault(),o.moveFocusRight(d)}this.syncSlotsToDOM();let p=o.state.activeSlot;requestAnimationFrame(()=>s.setSelectionRange(p,p))}}),s.addEventListener("input",()=>{if(this._isDisabled)return;let l=s.value;if(!l){o.resetState(),s.value="",s.setSelectionRange(0,0),this.syncSlotsToDOM(),this.dispatchChange();return}let d=O(l,h,S).slice(0,u);o.resetState();for(let p=0;p<d.length;p++)o.inputChar(p,d[p]);let n=Math.min(d.length,u-1);s.value=d,s.setSelectionRange(n,n),o.moveFocusTo(n),this.syncSlotsToDOM(),this.dispatchChange(),e&&o.state.isComplete&&requestAnimationFrame(()=>s.blur())}),s.addEventListener("paste",l=>{var g,w,c;if(this._isDisabled)return;l.preventDefault();let d=(w=(g=l.clipboardData)==null?void 0:g.getData("text"))!=null?w:"",n=(c=s.selectionStart)!=null?c:0;o.pasteString(n,d);let{slotValues:p,activeSlot:b}=o.state;s.value=p.join(""),s.setSelectionRange(b,b),this.syncSlotsToDOM(),this.dispatchChange(),e&&o.state.isComplete&&requestAnimationFrame(()=>s.blur())}),s.addEventListener("focus",()=>{var l;(l=this._onFocus)==null||l.call(this),requestAnimationFrame(()=>{let d=o.state.activeSlot,n=o.state.slotValues[d];t&&n?s.setSelectionRange(d,d+1):s.setSelectionRange(d,d),this.syncSlotsToDOM()})}),s.addEventListener("blur",()=>{var l;(l=this._onBlur)==null||l.call(this),this.slotEls.forEach(d=>{d.classList.remove("is-active")}),this.caretEls.forEach(d=>{d.style.display="none"})})}dispatchChange(){var t,e;this.dispatchEvent(new CustomEvent("change",{detail:{code:(e=(t=this.digito)==null?void 0:t.getCode())!=null?e:""},bubbles:!0,composed:!0}))}reset(){var t,e,s;this._isSuccess=!1,(t=this.digito)==null||t.resetState(),this.hiddenInput&&(this.hiddenInput.value="",this._isDisabled||this.hiddenInput.focus(),this.hiddenInput.setSelectionRange(0,0)),this.timerBadgeEl&&(this.timerBadgeEl.textContent=I(this._timer)),this.timerEl&&(this.timerEl.style.display="flex"),this.resendEl&&this.resendEl.classList.remove("is-visible"),(e=this.resendCountdown)==null||e.stop(),(s=this.timerCtrl)==null||s.restart(),this.syncSlotsToDOM()}setError(t){var e;t&&(this._isSuccess=!1),(e=this.digito)==null||e.setError(t),this.syncSlotsToDOM()}setSuccess(t){var e,s,o;this._isSuccess=t,t&&((e=this.digito)==null||e.setError(!1),(s=this.timerCtrl)==null||s.stop(),(o=this.resendCountdown)==null||o.stop(),this.timerEl&&(this.timerEl.style.display="none"),this.resendEl&&(this.resendEl.style.display="none")),this.syncSlotsToDOM()}setDisabled(t){var e;this._isDisabled=t,(e=this.digito)==null||e.setDisabled(t),this.applyDisabledDOM(t),this.syncSlotsToDOM(),!t&&this.hiddenInput&&requestAnimationFrame(()=>{var s,o,u,h,S,l;(s=this.hiddenInput)==null||s.focus(),(l=this.hiddenInput)==null||l.setSelectionRange((u=(o=this.digito)==null?void 0:o.state.activeSlot)!=null?u:0,(S=(h=this.digito)==null?void 0:h.state.activeSlot)!=null?S:0)})}getCode(){var t,e;return(e=(t=this.digito)==null?void 0:t.getCode())!=null?e:""}};$.observedAttributes=["length","type","timer","resend-after","disabled","separator-after","separator","masked","mask-char","name","placeholder","auto-focus","select-on-focus","blur-on-complete"];typeof customElements!="undefined"&&!customElements.get("digito-input")&&customElements.define("digito-input",$);})();
|
|
156
|
+
`,$=class extends HTMLElement{constructor(){super();this.slotEls=[];this.caretEls=[];this.hiddenInput=null;this.timerEl=null;this.timerBadgeEl=null;this.resendEl=null;this.timerCtrl=null;this.resendCountdown=null;this.digito=null;this._isDisabled=!1;this._isSuccess=!1;this._isReadOnly=!1;this._pattern=void 0;this._pasteTransformer=void 0;this._onComplete=void 0;this._onResend=void 0;this._onFocus=void 0;this._onBlur=void 0;this._onInvalidChar=void 0;this.shadow=this.attachShadow({mode:"open"})}set onComplete(t){if(t!==void 0&&typeof t!="function"){console.warn("[digito] onComplete must be a function, got:",typeof t);return}this._onComplete=t}set onResend(t){if(t!==void 0&&typeof t!="function"){console.warn("[digito] onResend must be a function, got:",typeof t);return}this._onResend=t}set onFocus(t){if(t!==void 0&&typeof t!="function"){console.warn("[digito] onFocus must be a function, got:",typeof t);return}this._onFocus=t}set onBlur(t){if(t!==void 0&&typeof t!="function"){console.warn("[digito] onBlur must be a function, got:",typeof t);return}this._onBlur=t}set onInvalidChar(t){if(t!==void 0&&typeof t!="function"){console.warn("[digito] onInvalidChar must be a function, got:",typeof t);return}this._onInvalidChar=t,this.shadow.children.length>0&&this.build()}set pattern(t){if(t!==void 0&&!(t instanceof RegExp)){console.warn("[digito] pattern must be a RegExp, got:",typeof t);return}this._pattern=t,this.shadow.children.length>0&&this.build()}set pasteTransformer(t){if(t!==void 0&&typeof t!="function"){console.warn("[digito] pasteTransformer must be a function, got:",typeof t);return}this._pasteTransformer=t,this.shadow.children.length>0&&this.build()}connectedCallback(){this.build()}disconnectedCallback(){var t,e,s;(t=this.timerCtrl)==null||t.stop(),(e=this.resendCountdown)==null||e.stop(),(s=this.digito)==null||s.resetState()}attributeChangedCallback(){this.shadow.children.length>0&&this.build()}get _length(){var e;let t=parseInt((e=this.getAttribute("length"))!=null?e:"6",10);return isNaN(t)||t<1?6:Math.floor(t)}get _type(){var t;return(t=this.getAttribute("type"))!=null?t:"numeric"}get _timer(){var e;let t=parseInt((e=this.getAttribute("timer"))!=null?e:"0",10);return isNaN(t)||t<0?0:Math.floor(t)}get _resendAfter(){var e;let t=parseInt((e=this.getAttribute("resend-after"))!=null?e:"30",10);return isNaN(t)||t<1?30:Math.floor(t)}get _disabledAttr(){return this.hasAttribute("disabled")}get _readOnlyAttr(){return this.hasAttribute("readonly")}get _defaultValue(){var t;return(t=this.getAttribute("default-value"))!=null?t:""}get _separatorAfter(){let t=this.getAttribute("separator-after");return t?t.split(",").map(e=>parseInt(e.trim(),10)).filter(e=>!isNaN(e)&&e>0):[]}get _separator(){var t;return(t=this.getAttribute("separator"))!=null?t:"\u2014"}get _masked(){return this.hasAttribute("masked")}get _maskChar(){var t;return(t=this.getAttribute("mask-char"))!=null?t:"\u25CF"}get _name(){var t;return(t=this.getAttribute("name"))!=null?t:""}get _placeholder(){var t;return(t=this.getAttribute("placeholder"))!=null?t:""}get _autoFocus(){return!this.hasAttribute("auto-focus")||this.getAttribute("auto-focus")!=="false"}get _selectOnFocus(){return this.hasAttribute("select-on-focus")}get _blurOnComplete(){return this.hasAttribute("blur-on-complete")}build(){var I,B,z;let t=this._length,e=this._type,s=this._timer,r=this._resendAfter,h=this._separatorAfter,g=this._separator,S=this._masked,a=this._name,l=this._autoFocus,u=this._selectOnFocus,o=this._blurOnComplete;for(this._isDisabled=this._disabledAttr,this._isReadOnly=this._readOnlyAttr,(I=this.timerCtrl)==null||I.stop(),(B=this.resendCountdown)==null||B.stop(),(z=this.digito)==null||z.resetState();this.shadow.firstChild;)this.shadow.removeChild(this.shadow.firstChild);this.slotEls=[],this.caretEls=[],this.timerEl=null,this.timerBadgeEl=null,this.resendEl=null,this.timerCtrl=null,this.resendCountdown=null;let w=document.createElement("style");w.textContent=ut,this.shadow.appendChild(w);let f=document.createElement("div");f.className="digito-wc-root";let b=document.createElement("div");b.className="digito-wc-slots";for(let m=0;m<t;m++){let p=document.createElement("div");p.className="digito-wc-slot",p.setAttribute("aria-hidden","true");let y=document.createElement("div");if(y.className="digito-wc-caret",p.appendChild(y),this.caretEls.push(y),this.slotEls.push(p),b.appendChild(p),h.some(C=>m===C-1)){let C=document.createElement("div");C.className="digito-wc-separator",C.textContent=g,C.setAttribute("aria-hidden","true"),b.appendChild(C)}}let c=document.createElement("input");if(c.type=S?"password":"text",c.inputMode=e==="numeric"?"numeric":"text",c.autocomplete="one-time-code",c.maxLength=t,c.disabled=this._isDisabled,c.className="digito-wc-hidden",c.setAttribute("aria-label",`Enter your ${t}-${e==="numeric"?"digit":"character"} code`),c.setAttribute("spellcheck","false"),c.setAttribute("autocorrect","off"),c.setAttribute("autocapitalize","off"),a&&(c.name=a),this.hiddenInput=c,f.appendChild(b),f.appendChild(c),this.shadow.appendChild(f),this.digito=G({length:t,type:e,pattern:this._pattern,pasteTransformer:this._pasteTransformer,onInvalidChar:this._onInvalidChar,readOnly:this._isReadOnly,onComplete:m=>{var p;(p=this._onComplete)==null||p.call(this,m),this.dispatchEvent(new CustomEvent("complete",{detail:{code:m},bubbles:!0,composed:!0}))}}),s>0){let m=document.createElement("div");m.className="digito-wc-timer",this.timerEl=m;let p=document.createElement("span");p.className="digito-wc-timer-label",p.textContent="Code expires in";let y=document.createElement("span");y.className="digito-wc-timer-badge",y.textContent=k(s),this.timerBadgeEl=y,m.appendChild(p),m.appendChild(y),f.appendChild(m);let C=document.createElement("div");C.className="digito-wc-resend",this.resendEl=C;let F=document.createElement("span");F.textContent="Didn\u2019t receive the code?";let x=document.createElement("button");x.className="digito-wc-resend-btn",x.textContent="Resend",x.type="button",C.appendChild(F),C.appendChild(x),f.appendChild(C),this.timerCtrl=q({totalSeconds:s,onTick:D=>{this.timerBadgeEl&&(this.timerBadgeEl.textContent=k(D))},onExpire:()=>{this.timerEl&&(this.timerEl.style.display="none"),this.resendEl&&this.resendEl.classList.add("is-visible"),this.dispatchEvent(new CustomEvent("expire",{bubbles:!0,composed:!0}))}}),this.timerCtrl.start(),x.addEventListener("click",()=>{var D,T;!this.timerEl||!this.timerBadgeEl||!this.resendEl||(this.resendEl.classList.remove("is-visible"),this.timerEl.style.display="flex",this.timerBadgeEl.textContent=k(r),(D=this.resendCountdown)==null||D.stop(),this.resendCountdown=q({totalSeconds:r,onTick:P=>{this.timerBadgeEl&&(this.timerBadgeEl.textContent=k(P))},onExpire:()=>{this.timerEl&&(this.timerEl.style.display="none"),this.resendEl&&this.resendEl.classList.add("is-visible")}}),this.resendCountdown.start(),(T=this._onResend)==null||T.call(this))})}this._isReadOnly&&c.setAttribute("aria-readonly","true");let V=this._defaultValue;if(V){let m=L(V.slice(0,t),e,this._pattern);if(m){for(let p=0;p<m.length;p++)this.digito.inputChar(p,m[p]);this.digito.cancelPendingComplete(),c.value=m}}this.attachEvents(u,o),this._isDisabled&&this.applyDisabledDOM(!0),c.addEventListener("click",m=>{var F,x,D;if(this._isDisabled)return;let p=this.slotEls.length-1;for(let T=0;T<this.slotEls.length;T++)if(m.clientX<=this.slotEls[T].getBoundingClientRect().right){p=T;break}let y=Math.min(p,c.value.length);(F=this.digito)==null||F.moveFocusTo(y);let C=(D=(x=this.digito)==null?void 0:x.state.slotValues[y])!=null?D:"";u&&C?c.setSelectionRange(y,y+1):c.setSelectionRange(y,y),this.syncSlotsToDOM()}),requestAnimationFrame(()=>{!this._isDisabled&&l&&c.focus(),c.setSelectionRange(0,0),this.syncSlotsToDOM()})}syncSlotsToDOM(){if(!this.digito||!this.hiddenInput)return;let{slotValues:t,activeSlot:e,hasError:s}=this.digito.state,r=this.shadow.activeElement===this.hiddenInput;this.slotEls.forEach((g,S)=>{var o;let a=(o=t[S])!=null?o:"",l=S===e&&r,u=g.childNodes[1];(!u||u.nodeType!==Node.TEXT_NODE)&&(u=document.createTextNode(""),g.appendChild(u)),u.nodeValue=this._masked&&a?this._maskChar:a||this._placeholder,g.classList.toggle("is-active",l&&!this._isDisabled),g.classList.toggle("is-filled",!!a),g.classList.toggle("is-masked",this._masked),g.classList.toggle("is-error",s),g.classList.toggle("is-success",this._isSuccess),g.classList.toggle("is-disabled",this._isDisabled),this.caretEls[S].style.display=l&&!a&&!this._isDisabled?"block":"none"});let h=t.join("");this.hiddenInput.value!==h&&(this.hiddenInput.value=h),this.toggleAttribute("data-complete",this.digito.state.isComplete),this.toggleAttribute("data-invalid",this.digito.state.hasError),this.toggleAttribute("data-disabled",this._isDisabled),this.toggleAttribute("data-readonly",this._isReadOnly)}applyDisabledDOM(t){this.hiddenInput&&(this.hiddenInput.disabled=t),this.slotEls.forEach(e=>e.classList.toggle("is-disabled",t))}attachEvents(t,e){let s=this.hiddenInput,r=this.digito,h=this._length,g=this._type,S=this._pattern;s.addEventListener("keydown",a=>{var u;if(this._isDisabled)return;let l=(u=s.selectionStart)!=null?u:0;if(a.key==="Backspace"){if(a.preventDefault(),this._isReadOnly)return;r.deleteChar(l),this.syncSlotsToDOM(),this.dispatchChange();let o=r.state.activeSlot;requestAnimationFrame(()=>s.setSelectionRange(o,o))}else if(a.key==="Delete"){if(a.preventDefault(),this._isReadOnly)return;r.clearSlot(l),this.syncSlotsToDOM(),this.dispatchChange(),requestAnimationFrame(()=>s.setSelectionRange(l,l))}else if(a.key==="ArrowLeft")a.preventDefault(),r.moveFocusLeft(l),this.syncSlotsToDOM(),requestAnimationFrame(()=>s.setSelectionRange(r.state.activeSlot,r.state.activeSlot));else if(a.key==="ArrowRight")a.preventDefault(),r.moveFocusRight(l),this.syncSlotsToDOM(),requestAnimationFrame(()=>s.setSelectionRange(r.state.activeSlot,r.state.activeSlot));else if(a.key==="Tab"){if(a.shiftKey){if(l===0)return;a.preventDefault(),r.moveFocusLeft(l)}else{if(!r.state.slotValues[l]||l>=h-1)return;a.preventDefault(),r.moveFocusRight(l)}this.syncSlotsToDOM();let o=r.state.activeSlot;requestAnimationFrame(()=>s.setSelectionRange(o,o))}}),s.addEventListener("input",()=>{if(this._isDisabled||this._isReadOnly)return;let a=s.value;if(!a){r.resetState(),s.value="",s.setSelectionRange(0,0),this.syncSlotsToDOM(),this.dispatchChange();return}let l=L(a,g,S).slice(0,h);r.resetState();for(let o=0;o<l.length;o++)r.inputChar(o,l[o]);let u=Math.min(l.length,h-1);s.value=l,s.setSelectionRange(u,u),r.moveFocusTo(u),this.syncSlotsToDOM(),this.dispatchChange(),e&&r.state.isComplete&&requestAnimationFrame(()=>s.blur())}),s.addEventListener("paste",a=>{var f,b,c;if(this._isDisabled||this._isReadOnly)return;a.preventDefault();let l=(b=(f=a.clipboardData)==null?void 0:f.getData("text"))!=null?b:"",u=(c=s.selectionStart)!=null?c:0;r.pasteString(u,l);let{slotValues:o,activeSlot:w}=r.state;s.value=o.join(""),s.setSelectionRange(w,w),this.syncSlotsToDOM(),this.dispatchChange(),e&&r.state.isComplete&&requestAnimationFrame(()=>s.blur())}),s.addEventListener("focus",()=>{var a;(a=this._onFocus)==null||a.call(this),requestAnimationFrame(()=>{let l=r.state.activeSlot,u=r.state.slotValues[l];t&&u?s.setSelectionRange(l,l+1):s.setSelectionRange(l,l),this.syncSlotsToDOM()})}),s.addEventListener("blur",()=>{var a;(a=this._onBlur)==null||a.call(this),this.slotEls.forEach(l=>{l.classList.remove("is-active")}),this.caretEls.forEach(l=>{l.style.display="none"})})}dispatchChange(){var t,e;this.dispatchEvent(new CustomEvent("change",{detail:{code:(e=(t=this.digito)==null?void 0:t.getCode())!=null?e:""},bubbles:!0,composed:!0}))}reset(){var t,e,s;this._isSuccess=!1,(t=this.digito)==null||t.resetState(),this.hiddenInput&&(this.hiddenInput.value="",this._isDisabled||this.hiddenInput.focus(),this.hiddenInput.setSelectionRange(0,0)),this.timerBadgeEl&&(this.timerBadgeEl.textContent=k(this._timer)),this.timerEl&&(this.timerEl.style.display="flex"),this.resendEl&&this.resendEl.classList.remove("is-visible"),(e=this.resendCountdown)==null||e.stop(),(s=this.timerCtrl)==null||s.restart(),this.syncSlotsToDOM()}setError(t){var e;t&&(this._isSuccess=!1),(e=this.digito)==null||e.setError(t),this.syncSlotsToDOM()}setSuccess(t){var e,s,r;this._isSuccess=t,t&&((e=this.digito)==null||e.setError(!1),(s=this.timerCtrl)==null||s.stop(),(r=this.resendCountdown)==null||r.stop(),this.timerEl&&(this.timerEl.style.display="none"),this.resendEl&&(this.resendEl.style.display="none")),this.syncSlotsToDOM()}setDisabled(t){var e;this._isDisabled=t,(e=this.digito)==null||e.setDisabled(t),this.applyDisabledDOM(t),this.syncSlotsToDOM(),!t&&this.hiddenInput&&requestAnimationFrame(()=>{var s,r,h,g,S,a;(s=this.hiddenInput)==null||s.focus(),(a=this.hiddenInput)==null||a.setSelectionRange((h=(r=this.digito)==null?void 0:r.state.activeSlot)!=null?h:0,(S=(g=this.digito)==null?void 0:g.state.activeSlot)!=null?S:0)})}getCode(){var t,e;return(e=(t=this.digito)==null?void 0:t.getCode())!=null?e:""}};$.observedAttributes=["length","type","timer","resend-after","disabled","readonly","separator-after","separator","masked","mask-char","name","placeholder","auto-focus","select-on-focus","blur-on-complete","default-value"];typeof customElements!="undefined"&&!customElements.get("digito-input")&&customElements.define("digito-input",$);})();
|
|
157
157
|
/**
|
|
158
158
|
* digito/core/filter
|
|
159
159
|
* ─────────────────────────────────────────────────────────────────────────────
|