otimus-library 0.4.90 → 0.4.91
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/fesm2022/otimus-library.mjs +14 -6
- package/fesm2022/otimus-library.mjs.map +1 -1
- package/index.d.ts +6 -3
- package/package.json +1 -1
|
@@ -3793,12 +3793,14 @@ class OcOtpComponent {
|
|
|
3793
3793
|
this.ocError = input(...(ngDevMode ? [undefined, { debugName: "ocError" }] : []));
|
|
3794
3794
|
this.ocDisabled = input(false, ...(ngDevMode ? [{ debugName: "ocDisabled" }] : []));
|
|
3795
3795
|
this.ocAutoFocus = input(false, ...(ngDevMode ? [{ debugName: "ocAutoFocus" }] : []));
|
|
3796
|
+
this.ocAlphanumeric = input(false, ...(ngDevMode ? [{ debugName: "ocAlphanumeric" }] : []));
|
|
3796
3797
|
this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
3797
3798
|
this.complete = new EventEmitter();
|
|
3798
3799
|
this.digits = signal(Array(6).fill(''), ...(ngDevMode ? [{ debugName: "digits" }] : []));
|
|
3799
3800
|
this.midpoint = computed(() => this.ocLength() / 2, ...(ngDevMode ? [{ debugName: "midpoint" }] : []));
|
|
3800
3801
|
this.shake = signal(false, ...(ngDevMode ? [{ debugName: "shake" }] : []));
|
|
3801
3802
|
this.shakeTimer = null;
|
|
3803
|
+
this.inputMode = computed(() => this.ocAlphanumeric() ? 'text' : 'numeric', ...(ngDevMode ? [{ debugName: "inputMode" }] : []));
|
|
3802
3804
|
effect(() => {
|
|
3803
3805
|
const len = this.ocLength();
|
|
3804
3806
|
const current = this.digits();
|
|
@@ -3810,7 +3812,7 @@ class OcOtpComponent {
|
|
|
3810
3812
|
effect(() => {
|
|
3811
3813
|
const incoming = this.value();
|
|
3812
3814
|
const len = this.ocLength();
|
|
3813
|
-
const sanitized = (incoming ?? '').
|
|
3815
|
+
const sanitized = this.sanitize(incoming ?? '').slice(0, len);
|
|
3814
3816
|
const next = Array(len).fill('').map((_, i) => sanitized[i] ?? '');
|
|
3815
3817
|
const current = this.digits();
|
|
3816
3818
|
const same = current.length === next.length && current.every((d, i) => d === next[i]);
|
|
@@ -3847,7 +3849,7 @@ class OcOtpComponent {
|
|
|
3847
3849
|
if (this.ocDisabled()) {
|
|
3848
3850
|
return;
|
|
3849
3851
|
}
|
|
3850
|
-
const raw = event.target.value
|
|
3852
|
+
const raw = this.sanitize(event.target.value).slice(0, 1);
|
|
3851
3853
|
const next = [...this.digits()];
|
|
3852
3854
|
next[idx] = raw;
|
|
3853
3855
|
this.digits.set(next);
|
|
@@ -3873,7 +3875,7 @@ class OcOtpComponent {
|
|
|
3873
3875
|
return;
|
|
3874
3876
|
}
|
|
3875
3877
|
const len = this.ocLength();
|
|
3876
|
-
const text = (event.clipboardData?.getData('text') ?? '').
|
|
3878
|
+
const text = this.sanitize(event.clipboardData?.getData('text') ?? '').slice(0, len);
|
|
3877
3879
|
if (text.length === len) {
|
|
3878
3880
|
event.preventDefault();
|
|
3879
3881
|
const next = text.split('');
|
|
@@ -3882,18 +3884,24 @@ class OcOtpComponent {
|
|
|
3882
3884
|
this.complete.emit(text);
|
|
3883
3885
|
}
|
|
3884
3886
|
}
|
|
3887
|
+
sanitize(raw) {
|
|
3888
|
+
if (this.ocAlphanumeric()) {
|
|
3889
|
+
return raw.replace(/[^A-Za-z0-9]/g, '').toUpperCase();
|
|
3890
|
+
}
|
|
3891
|
+
return raw.replace(/\D/g, '');
|
|
3892
|
+
}
|
|
3885
3893
|
focusBox(idx) {
|
|
3886
3894
|
const target = this.inputs?.get(idx);
|
|
3887
3895
|
target?.nativeElement.focus();
|
|
3888
3896
|
target?.nativeElement.select?.();
|
|
3889
3897
|
}
|
|
3890
3898
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcOtpComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3891
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcOtpComponent, isStandalone: true, selector: "oc-otp", inputs: { ocLength: { classPropertyName: "ocLength", publicName: "ocLength", isSignal: true, isRequired: false, transformFunction: null }, ocSeparator: { classPropertyName: "ocSeparator", publicName: "ocSeparator", isSignal: true, isRequired: false, transformFunction: null }, ocError: { classPropertyName: "ocError", publicName: "ocError", isSignal: true, isRequired: false, transformFunction: null }, ocDisabled: { classPropertyName: "ocDisabled", publicName: "ocDisabled", isSignal: true, isRequired: false, transformFunction: null }, ocAutoFocus: { classPropertyName: "ocAutoFocus", publicName: "ocAutoFocus", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", complete: "complete" }, viewQueries: [{ propertyName: "inputs", predicate: ["otpInput"], descendants: true }], ngImport: i0, template: "<div\n class=\"oc-otp\"\n [class.oc-otp--error]=\"!!ocError()\"\n [class.oc-otp--shake]=\"shake()\"\n (paste)=\"onPaste($event)\"\n>\n @for (digit of digits(); track $index) {\n @if (ocSeparator() && $index === midpoint()) {\n <span\n class=\"oc-otp__separator\"\n data-testid=\"oc-otp-separator\"\n aria-hidden=\"true\"\n >-</span\n >\n }\n <input\n #otpInput\n class=\"oc-otp__input\"\n type=\"text\"\n inputmode=\"
|
|
3899
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcOtpComponent, isStandalone: true, selector: "oc-otp", inputs: { ocLength: { classPropertyName: "ocLength", publicName: "ocLength", isSignal: true, isRequired: false, transformFunction: null }, ocSeparator: { classPropertyName: "ocSeparator", publicName: "ocSeparator", isSignal: true, isRequired: false, transformFunction: null }, ocError: { classPropertyName: "ocError", publicName: "ocError", isSignal: true, isRequired: false, transformFunction: null }, ocDisabled: { classPropertyName: "ocDisabled", publicName: "ocDisabled", isSignal: true, isRequired: false, transformFunction: null }, ocAutoFocus: { classPropertyName: "ocAutoFocus", publicName: "ocAutoFocus", isSignal: true, isRequired: false, transformFunction: null }, ocAlphanumeric: { classPropertyName: "ocAlphanumeric", publicName: "ocAlphanumeric", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", complete: "complete" }, viewQueries: [{ propertyName: "inputs", predicate: ["otpInput"], descendants: true }], ngImport: i0, template: "<div\n class=\"oc-otp\"\n [class.oc-otp--error]=\"!!ocError()\"\n [class.oc-otp--shake]=\"shake()\"\n (paste)=\"onPaste($event)\"\n>\n @for (digit of digits(); track $index) {\n @if (ocSeparator() && $index === midpoint()) {\n <span\n class=\"oc-otp__separator\"\n data-testid=\"oc-otp-separator\"\n aria-hidden=\"true\"\n >-</span\n >\n }\n <input\n #otpInput\n class=\"oc-otp__input\"\n type=\"text\"\n [attr.inputmode]=\"inputMode()\"\n autocomplete=\"one-time-code\"\n maxlength=\"1\"\n [attr.data-testid]=\"'oc-otp-' + $index\"\n [value]=\"digit\"\n [disabled]=\"ocDisabled()\"\n (input)=\"onInput($index, $event)\"\n (keydown)=\"onKey($index, $event)\"\n />\n }\n</div>\n", styles: [".oc-otp{display:flex;align-items:center;justify-content:center;gap:8px}.oc-otp__input{flex:1 1 0;min-width:0;max-width:56px;height:56px;border:1px solid #d1d5db;border-radius:10px;background:#f8f9ff;font:inherit;font-size:24px;font-weight:500;color:#353535;text-align:center;outline:none;transition:all .15s ease}.oc-otp__input:focus{background:#fff;border-color:#00dda3;box-shadow:0 4px 3.2px #00dda314,0 0 0 4px #00dda324}.oc-otp__input:disabled{cursor:not-allowed;opacity:.6}.oc-otp__separator{flex:0 0 auto;color:#8f9596;font-size:24px;font-weight:500;-webkit-user-select:none;user-select:none;line-height:1;padding:0 2px}.oc-otp--error .oc-otp__input{border-color:#ed3a3a}.oc-otp--shake{animation:oc-otp-shake .32s ease}@keyframes oc-otp-shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3892
3900
|
}
|
|
3893
3901
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcOtpComponent, decorators: [{
|
|
3894
3902
|
type: Component,
|
|
3895
|
-
args: [{ selector: 'oc-otp', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"oc-otp\"\n [class.oc-otp--error]=\"!!ocError()\"\n [class.oc-otp--shake]=\"shake()\"\n (paste)=\"onPaste($event)\"\n>\n @for (digit of digits(); track $index) {\n @if (ocSeparator() && $index === midpoint()) {\n <span\n class=\"oc-otp__separator\"\n data-testid=\"oc-otp-separator\"\n aria-hidden=\"true\"\n >-</span\n >\n }\n <input\n #otpInput\n class=\"oc-otp__input\"\n type=\"text\"\n inputmode=\"
|
|
3896
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { ocLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocLength", required: false }] }], ocSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocSeparator", required: false }] }], ocError: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocError", required: false }] }], ocDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocDisabled", required: false }] }], ocAutoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocAutoFocus", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], complete: [{
|
|
3903
|
+
args: [{ selector: 'oc-otp', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"oc-otp\"\n [class.oc-otp--error]=\"!!ocError()\"\n [class.oc-otp--shake]=\"shake()\"\n (paste)=\"onPaste($event)\"\n>\n @for (digit of digits(); track $index) {\n @if (ocSeparator() && $index === midpoint()) {\n <span\n class=\"oc-otp__separator\"\n data-testid=\"oc-otp-separator\"\n aria-hidden=\"true\"\n >-</span\n >\n }\n <input\n #otpInput\n class=\"oc-otp__input\"\n type=\"text\"\n [attr.inputmode]=\"inputMode()\"\n autocomplete=\"one-time-code\"\n maxlength=\"1\"\n [attr.data-testid]=\"'oc-otp-' + $index\"\n [value]=\"digit\"\n [disabled]=\"ocDisabled()\"\n (input)=\"onInput($index, $event)\"\n (keydown)=\"onKey($index, $event)\"\n />\n }\n</div>\n", styles: [".oc-otp{display:flex;align-items:center;justify-content:center;gap:8px}.oc-otp__input{flex:1 1 0;min-width:0;max-width:56px;height:56px;border:1px solid #d1d5db;border-radius:10px;background:#f8f9ff;font:inherit;font-size:24px;font-weight:500;color:#353535;text-align:center;outline:none;transition:all .15s ease}.oc-otp__input:focus{background:#fff;border-color:#00dda3;box-shadow:0 4px 3.2px #00dda314,0 0 0 4px #00dda324}.oc-otp__input:disabled{cursor:not-allowed;opacity:.6}.oc-otp__separator{flex:0 0 auto;color:#8f9596;font-size:24px;font-weight:500;-webkit-user-select:none;user-select:none;line-height:1;padding:0 2px}.oc-otp--error .oc-otp__input{border-color:#ed3a3a}.oc-otp--shake{animation:oc-otp-shake .32s ease}@keyframes oc-otp-shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}\n"] }]
|
|
3904
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { ocLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocLength", required: false }] }], ocSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocSeparator", required: false }] }], ocError: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocError", required: false }] }], ocDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocDisabled", required: false }] }], ocAutoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocAutoFocus", required: false }] }], ocAlphanumeric: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocAlphanumeric", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], complete: [{
|
|
3897
3905
|
type: Output
|
|
3898
3906
|
}], inputs: [{
|
|
3899
3907
|
type: ViewChildren,
|