ng-cw-v12
Version:
Angular UI component library
318 lines (312 loc) • 15.8 kB
JavaScript
import * as i0 from '@angular/core';
import { PLATFORM_ID, Injectable, Inject, forwardRef, Component, Input, HostListener, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { isPlatformBrowser, CommonModule } from '@angular/common';
import * as i3 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
class LocalService {
constructor(platformId) {
this.platformId = platformId;
this.isBrowser = false;
this.isBrowser = isPlatformBrowser(this.platformId);
}
}
LocalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LocalService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
LocalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LocalService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LocalService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return [{ type: Object, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }]; } });
class OtpComponent {
constructor(eleRef, cd, ls) {
this.eleRef = eleRef;
this.cd = cd;
this.ls = ls;
this.ncLength = 6;
this.ncSize = 'default';
this.simpleMode = false;
this.maskMode = false;
this.disabledMode = false;
this.readonlyMode = false;
this.integerOnlyMode = false;
this.autofocusMode = false;
this.inputArr = [];
this.innerValue = [];
this.curIndex = -1;
this.inputDoms = [];
this.canCopy = false;
this.onChangeCallback = () => { };
this.onTouchedCallback = () => { };
}
set ncDisabled(value) {
this.disabledMode = value !== null && value !== undefined && value !== false && value !== 'false';
}
set ncReadonly(value) {
this.readonlyMode = value !== null && value !== undefined && value !== false && value !== 'false';
}
set ncMask(value) {
this.maskMode = value !== null && value !== undefined && value !== false && value !== 'false';
}
set ncSimple(value) {
this.simpleMode = value !== null && value !== undefined && value !== false && value !== 'false';
}
set ncIntegerOnly(value) {
this.integerOnlyMode = value !== null && value !== undefined && value !== false && value !== 'false';
}
set ncAutofocus(value) {
this.autofocusMode = value !== null && value !== undefined && value !== false && value !== 'false';
}
handleKeyDown(event) {
if (this.curIndex == -1) {
return;
}
if (event.ctrlKey && (event.key == "v" || event.key === "V")) {
//防止ctrl+v时v执行nextInput
return;
}
if (event.code == 'Space') {
event.preventDefault();
return;
}
if (event.key == 'Backspace' || event.key == 'Delete') {
setTimeout(() => {
//先执行删除操作，再执行lastInput
this.lastInput(this.curIndex);
});
return;
}
if (event.key == 'ArrowLeft') {
setTimeout(() => {
this.lastInput(this.curIndex);
});
return;
}
if (event.key == 'ArrowRight') {
setTimeout(() => {
this.nextInput(this.curIndex);
});
return;
}
if (this.integerOnlyMode) {
if (!(/^[0-9]{1}$/.test(event.key))) {
event.preventDefault();
}
else {
setTimeout(() => {
//先执行输入操作，再执行nextInput
this.nextInput(this.curIndex);
});
}
}
else {
if (/^[a-zA-Z0-9]{1}$/.test(event.key)) {
setTimeout(() => {
//先执行输入操作，再执行nextInput
this.nextInput(this.curIndex);
});
}
}
}
ngOnInit() {
this.inputArr = Array.from({ length: this.ncLength });
}
ngAfterViewInit() {
var _a;
this.inputDoms = this.eleRef.nativeElement.querySelectorAll('.otp-input');
if (this.autofocusMode) {
setTimeout(() => {
this.inputDoms[0].focus();
});
}
const otpContainer = this.eleRef.nativeElement.querySelector(`.otp-container`);
const parent = (_a = otpContainer.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement; //nc-otp的父级
if (this.ls.isBrowser) {
document.addEventListener('click', (event) => {
//选中parent或parent内部元素
if (event.target == parent || parent.contains((event.target))) {
this.canCopy = true;
}
else {
this.canCopy = false;
}
});
document.addEventListener('paste', (event) => {
if (this.canCopy) {
// 阻止默认粘贴行为
event.preventDefault();
// 获取剪贴板数据
const clipboardData = event.clipboardData;
let pastedData = clipboardData.getData('Text');
// 处理获取的文本数据
if (pastedData && pastedData.length > 0 && !this.disabledMode && !this.readonlyMode) {
//删除空格
pastedData = pastedData.replace(/\s+/g, '');
let pastedDataArr = pastedData.split('');
//integerOnlyMode下存在非数字中断粘贴
if (this.integerOnlyMode) {
for (let d of pastedDataArr) {
if (isNaN(Number(d))) {
return;
}
}
}
while (pastedDataArr.length < this.ncLength) {
pastedDataArr.push(null);
}
if (pastedDataArr.length > this.ncLength) {
pastedDataArr = pastedDataArr.slice(0, this.ncLength);
}
for (let i = 0; i < pastedDataArr.length; i++) {
pastedDataArr[i] = !pastedDataArr[i] ? null : (isNaN(Number(pastedDataArr[i])) ? pastedDataArr[i] : Number(pastedDataArr[i]));
}
this.value = [...pastedDataArr];
}
}
});
}
}
ngOnDestroy() {
if (this.ls.isBrowser) {
document.removeEventListener('click', () => { });
document.removeEventListener('paste', () => { });
}
}
inputFocus(index) {
this.curIndex = index;
const inputElement = this.inputDoms[index];
if (inputElement.value) {
inputElement.select();
}
}
inputBlur(index) {
this.curIndex = -1;
}
lastInput(index) {
const lastIndex = index == 0 ? index : index - 1;
const lastInput = this.inputDoms[lastIndex];
lastInput.focus();
}
nextInput(index) {
const nextIndex = index == this.ncLength - 1 ? index : index + 1;
const nextInput = this.inputDoms[nextIndex];
nextInput.focus();
}
get value() {
return this.innerValue;
}
set value(v) {
if (JSON.stringify(v) !== JSON.stringify(this.innerValue)) {
this.innerValue = v;
this.onChangeCallback(v);
}
}
// 从模型写入值到视图
writeValue(value) {
if (JSON.stringify(value) !== JSON.stringify(this.innerValue)) {
this.innerValue = value;
this.cd.markForCheck();
}
}
// 注册 onChange 事件
registerOnChange(fn) {
this.onChangeCallback = fn;
}
// 注册 onTouched 事件
registerOnTouched(fn) {
this.onTouchedCallback = fn;
}
onInputChange(index, event) {
//integerOnlyMode下非数字置空
if (this.integerOnlyMode && isNaN(Number(event))) {
const inputElement = this.inputDoms[index];
inputElement.value = '';
event = '';
}
let temp = [...this.value];
//补齐数组
while (temp.length < this.ncLength) {
temp.push(null);
}
if (temp.length > this.ncLength) {
temp = temp.slice(0, this.ncLength);
}
temp.splice(index, 1, event == '' ? null : (isNaN(Number(event)) ? event : Number(event)));
this.value = [...temp]; //执行set value
}
}
OtpComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: OtpComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: LocalService }], target: i0.ɵɵFactoryTarget.Component });
OtpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: OtpComponent, selector: "nc-otp", inputs: { ncLength: "ncLength", ncSize: "ncSize", ncDisabled: "ncDisabled", ncReadonly: "ncReadonly", ncMask: "ncMask", ncSimple: "ncSimple", ncIntegerOnly: "ncIntegerOnly", ncAutofocus: "ncAutofocus" }, host: { listeners: { "window:keydown": "handleKeyDown($event)" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => OtpComponent),
multi: true
}
], ngImport: i0, template: "<div class=\"otp-container\" style=\"--gap: {{ncSize == 'small' ? '8px' : (ncSize == 'large' ? '12px' : '10px')}}\">\r\n <input *ngFor=\"let input of inputArr;let index = index;\" class=\"otp-input\" [class.otp-input-simple]=\"simpleMode\"\r\n [class.otp-input-large]=\"ncSize == 'large'\" [class.otp-input-small]=\"ncSize == 'small'\"\r\n [class.otp-input-mask]=\"maskMode\" type=\"text\" autocomplete=\"off\" [disabled]=\"disabledMode\"\r\n [readonly]=\"readonlyMode\" maxlength=\"1\" (focus)=\"inputFocus(index)\" (blur)=\"inputBlur(index)\"\r\n [ngModel]=\"value ? value[index]: null\" (ngModelChange)=\"onInputChange(index, $event)\">\r\n</div>", styles: [".otp-container{display:flex;grid-gap:var(--gap);gap:var(--gap);width:-moz-fit-content;width:fit-content}.otp-container .otp-input{width:35px;height:33px;font-size:14px;color:#334155;background:#ffffff;padding:.5em .75em;border:1px solid #cbd5e1;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s;-webkit-appearance:none;appearance:none;border-radius:6px;box-shadow:0 0 #0000,0 0 #0000,0 1px 2px #1212170d;text-align:center}.otp-container .otp-input:hover{border-color:#94a3b8}.otp-container .otp-input:focus{outline:1px solid #3b82f6;outline-offset:-1px;box-shadow:none;border-color:#94a3b8}.otp-container .otp-input::selection{background-color:#eff5fe;color:#393ada}.otp-container .otp-input:disabled{border:1px solid #DDD;background-color:#f5f5f5;color:#aca899;opacity:1}.otp-container .otp-input-simple{border-width:0 0 2px 0;border-color:#64748b;box-shadow:none;border-radius:0;background:none;color:#42769e}.otp-container .otp-input-simple:focus{outline:none;box-shadow:none;border-color:#3b82f6}.otp-container .otp-input-simple:disabled{border-color:#ddd;border-width:0 0 2px 0;background-color:#fff0;color:#aca899;opacity:1}.otp-container .otp-input-mask{-webkit-text-security:disc}.otp-container .otp-input-large{width:45px;height:43px;font-size:18px}.otp-container .otp-input-small{width:27px;height:25px;padding:.3em .55em;font-size:12px}\n"], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: OtpComponent, decorators: [{
type: Component,
args: [{
selector: 'nc-otp',
templateUrl: './otp.component.html',
styleUrls: ['./otp.component.less'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => OtpComponent),
multi: true
}
]
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: LocalService }]; }, propDecorators: { ncLength: [{
type: Input
}], ncSize: [{
type: Input
}], ncDisabled: [{
type: Input
}], ncReadonly: [{
type: Input
}], ncMask: [{
type: Input
}], ncSimple: [{
type: Input
}], ncIntegerOnly: [{
type: Input
}], ncAutofocus: [{
type: Input
}], handleKeyDown: [{
type: HostListener,
args: ['window:keydown', ['$event']]
}] } });
class NcOtpModule {
}
NcOtpModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcOtpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NcOtpModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcOtpModule, declarations: [OtpComponent], imports: [CommonModule,
FormsModule], exports: [OtpComponent] });
NcOtpModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcOtpModule, imports: [[
CommonModule,
FormsModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcOtpModule, decorators: [{
type: NgModule,
args: [{
declarations: [
OtpComponent
],
imports: [
CommonModule,
FormsModule
],
exports: [
OtpComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { NcOtpModule, OtpComponent };
//# sourceMappingURL=ng-cw-v12-otp.js.map