Skip to content

Commit d05f28f

Browse files
AlexMiniAppsAlexMiniApps
committed
Release v 1.3.0:
- Added the root config of the component - The prop `isCharsCode` has been added for using instead of the `isNonDigitsCode` - Added the ability to configure component at runtime
1 parent 6a1afa7 commit d05f28f

8 files changed

+133
-35
lines changed

‎README.md

+22-7
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
![](https://img.shields.io/npm/v/angular-code-input)
55
![](https://img.shields.io/github/issues/AlexMiniApps/angular-code-input?color=%23aaa)
66

7-
Robust and <b>tested</b> code (number/chars) input component for Angular 7, 8, 9, 10 + projects.<br />
7+
Robust and <b>tested</b> code (number/chars) input component for Angular 7 - 11+ projects.<br />
88
Ionic 4, 5 + is supported, can be used in iOS and Android.<br />
99
<b>Clipboard</b> events are supported.
1010

@@ -16,7 +16,7 @@ Preview
1616

1717
## Supported platforms
1818

19-
<b>Angular</b> 7, 8, 9, 10 +<br />
19+
<b>Angular</b> 7, 8, 9, 10, 11 +<br />
2020
<b>Ionic</b> 4, 5 +<br />
2121
Mobile browsers and WebViews on: <b>Android</b> and <b>iOS</b><br />
2222
Desktop browsers: <b>Chrome, Firefox, Safari, Edge v.79 +</b><br />
@@ -41,12 +41,27 @@ import { CodeInputModule } from 'angular-code-input';
4141
})
4242
```
4343

44+
It is possible to configure the component across the app using the root config. In such case the import will look as follows:
45+
```ts
46+
import { CodeInputModule } from 'angular-code-input';
47+
48+
@NgModule({
49+
imports: [
50+
// ...
51+
CodeInputModule.forRoot({
52+
codeLength: 6,
53+
isCharsCode: true,
54+
code: 'abcd'
55+
}),
56+
]
57+
})
58+
```
59+
4460
Include the component on page template HTML:
4561

4662
```html
47-
<code-input [isCodeHidden]="false"
48-
[isNonDigitsCode]="false"
49-
[codeLength]="4"
63+
<code-input [isCodeHidden]="true"
64+
[codeLength]="5"
5065
(codeChanged)="onCodeChanged($event)"
5166
(codeCompleted)="onCodeCompleted($event)">
5267
</code-input>
@@ -117,11 +132,11 @@ Example with only bottom borders:
117132
| <b>`codeLength`</b> | number | 4 | Length of input code |
118133
| <b>`inputType`</b> | string | tel | Type of the input DOM elements like `<input [type]="inputType"/>` default '`tel'` |
119134
| <b>`isCodeHidden`</b> | boolean | false | When `true` inputted code chars will be shown as asterisks (points) |
120-
| <b>`isNonDigitsCode`</b> | boolean | false | When `true` inputted code can contain any char and not only digits from 0 to 9. If the input parameter <b>`code`</b> contains non digits chars and `isNonDigitsCode` is `false` the value will be ignored |
135+
| <b>`isCharsCode`</b> | boolean | false | When `true` inputted code can contain any char and not only digits from 0 to 9. If the input parameter <b>`code`</b> contains non digits chars and `isCharsCode` is `false` the value will be ignored |
121136
| <b>`isPrevFocusableAfterClearing`</b> | boolean | true | When `true` after the input value deletion the caret will be moved to the previous input immediately. If `false` then after the input value deletion the caret will stay on the current input and be moved to the previous input only if the current input is empty |
122137
| <b>`isFocusingOnLastByClickIfFilled`</b> | boolean | false | When `true` and the code is filled then the focus will be moved to the last input element when clicked |
123138
| <b>`initialFocusField`</b> | number | - | The index of the input box for initial focusing. When the component will appear the focus will be placed on the input with this index. <br/> Note: If you need to dynamically hide the component it is needed to use <b>*ngIf</b> directive instead of the `[hidden]` attribute. |
124-
| <b>`code`</b> | string / number | - | The input code value for the component. If the parameter contains non digits chars and `isNonDigitsCode` is `false` the value will be <b>ignored |
139+
| <b>`code`</b> | string / number | - | The input code value for the component. If the parameter contains non digits chars and `isCharsCode` is `false` the value will be <b>ignored |
125140

126141
#### Events
127142

‎angular-code-input/CHANGELOG.md

+6
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
# 1.3.0 (30.11.2020)
2+
**Note:** The following changes have been made:
3+
- Added the root config of the component
4+
- The prop `isCharsCode` has been added for using instead of the `isNonDigitsCode`
5+
- Added the ability to configure component at runtime
6+
17
# 1.2.2 (04.08.2020)
28
**Note:** Have added the prop initialFocusField for focusing on the appropriate input when
39
the component has been appeared.

‎angular-code-input/README.md

+22-7
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
![](https://img.shields.io/npm/v/angular-code-input)
55
![](https://img.shields.io/github/issues/AlexMiniApps/angular-code-input?color=%23aaa)
66

7-
Robust and <b>tested</b> code (number/chars) input component for Angular 7, 8, 9, 10 + projects.<br />
7+
Robust and <b>tested</b> code (number/chars) input component for Angular 7 - 11+ projects.<br />
88
Ionic 4, 5 + is supported, can be used in iOS and Android.<br />
99
<b>Clipboard</b> events are supported.
1010

@@ -16,7 +16,7 @@ Preview
1616

1717
## Supported platforms
1818

19-
<b>Angular</b> 7, 8, 9, 10 +<br />
19+
<b>Angular</b> 7, 8, 9, 10, 11 +<br />
2020
<b>Ionic</b> 4, 5 +<br />
2121
Mobile browsers and WebViews on: <b>Android</b> and <b>iOS</b><br />
2222
Desktop browsers: <b>Chrome, Firefox, Safari, Edge v.79 +</b><br />
@@ -41,12 +41,27 @@ import { CodeInputModule } from 'angular-code-input';
4141
})
4242
```
4343

44+
It is possible to configure the component across the app using the root config. In such case the import will look as follows:
45+
```ts
46+
import { CodeInputModule } from 'angular-code-input';
47+
48+
@NgModule({
49+
imports: [
50+
// ...
51+
CodeInputModule.forRoot({
52+
codeLength: 6,
53+
isCharsCode: true,
54+
code: 'abcd'
55+
}),
56+
]
57+
})
58+
```
59+
4460
Include the component on page template HTML:
4561

4662
```html
47-
<code-input [isCodeHidden]="false"
48-
[isNonDigitsCode]="false"
49-
[codeLength]="4"
63+
<code-input [isCodeHidden]="true"
64+
[codeLength]="5"
5065
(codeChanged)="onCodeChanged($event)"
5166
(codeCompleted)="onCodeCompleted($event)">
5267
</code-input>
@@ -117,11 +132,11 @@ Example with only bottom borders:
117132
| <b>`codeLength`</b> | number | 4 | Length of input code |
118133
| <b>`inputType`</b> | string | tel | Type of the input DOM elements like `<input [type]="inputType"/>` default '`tel'` |
119134
| <b>`isCodeHidden`</b> | boolean | false | When `true` inputted code chars will be shown as asterisks (points) |
120-
| <b>`isNonDigitsCode`</b> | boolean | false | When `true` inputted code can contain any char and not only digits from 0 to 9. If the input parameter <b>`code`</b> contains non digits chars and `isNonDigitsCode` is `false` the value will be ignored |
135+
| <b>`isCharsCode`</b> | boolean | false | When `true` inputted code can contain any char and not only digits from 0 to 9. If the input parameter <b>`code`</b> contains non digits chars and `isCharsCode` is `false` the value will be ignored |
121136
| <b>`isPrevFocusableAfterClearing`</b> | boolean | true | When `true` after the input value deletion the caret will be moved to the previous input immediately. If `false` then after the input value deletion the caret will stay on the current input and be moved to the previous input only if the current input is empty |
122137
| <b>`isFocusingOnLastByClickIfFilled`</b> | boolean | false | When `true` and the code is filled then the focus will be moved to the last input element when clicked |
123138
| <b>`initialFocusField`</b> | number | - | The index of the input box for initial focusing. When the component will appear the focus will be placed on the input with this index. <br/> Note: If you need to dynamically hide the component it is needed to use <b>*ngIf</b> directive instead of the `[hidden]` attribute. |
124-
| <b>`code`</b> | string / number | - | The input code value for the component. If the parameter contains non digits chars and `isNonDigitsCode` is `false` the value will be <b>ignored |
139+
| <b>`code`</b> | string / number | - | The input code value for the component. If the parameter contains non digits chars and `isCharsCode` is `false` the value will be <b>ignored |
125140

126141
#### Events
127142

‎angular-code-input/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "angular-code-input",
3-
"version": "1.2.2",
4-
"description": "Code or pin code input for Angular 7, 8, 9, 10 + / Ionic 4, 5 + projects",
3+
"version": "1.3.0",
4+
"description": "Code or pin code input for Angular 7 - 11+ / Ionic 4, 5 + projects",
55
"keywords": ["angular", "pincode", "angular-pincode", "otp", "code-input", "angular-otp", "ionic-otp", "ionic-code-input", "ionic-pincode"],
66
"author": "Alexander Dmitrenko",
77
"license": "MIT",

‎angular-code-input/src/lib/code-input.component.config.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import {InjectionToken} from '@angular/core';
2+
3+
export const CodeInputComponentConfigToken = new InjectionToken<CodeInputComponentConfig>('CodeInputComponentConfig');
4+
5+
export interface CodeInputComponentConfig {
6+
codeLength?: number;
7+
inputType?: string;
8+
initialFocusField?: number;
9+
isCharsCode?: boolean;
10+
isCodeHidden?: boolean;
11+
isPrevFocusableAfterClearing?: boolean;
12+
isFocusingOnLastByClickIfFilled?: boolean;
13+
code?: string | number;
14+
}
15+
16+
export const defaultComponentConfig: CodeInputComponentConfig = {
17+
codeLength: 4,
18+
inputType: 'tel',
19+
initialFocusField: undefined,
20+
isCharsCode: false,
21+
isCodeHidden: false,
22+
isPrevFocusableAfterClearing: true,
23+
isFocusingOnLastByClickIfFilled: false,
24+
code: undefined
25+
};

‎angular-code-input/src/lib/code-input.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<span *ngFor="let holder of placeHolders; index as i"
1+
<span *ngFor="let holder of placeholders; index as i"
22
[class.empty]="isInputElementEmptyAt(i)"
33
[class.code-hidden]="isCodeHidden">
44
<input #input

‎angular-code-input/src/lib/code-input.component.ts

+42-15
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,21 @@ import {
44
Component,
55
ElementRef,
66
EventEmitter,
7+
Inject,
78
Input,
89
OnChanges,
910
OnInit,
11+
Optional,
1012
Output,
1113
QueryList,
1214
SimpleChanges,
1315
ViewChildren
1416
} from '@angular/core';
17+
import {
18+
CodeInputComponentConfig,
19+
CodeInputComponentConfigToken,
20+
defaultComponentConfig
21+
} from './code-input.component.config';
1522

1623
enum InputState {
1724
ready = 0,
@@ -23,23 +30,25 @@ enum InputState {
2330
templateUrl: 'code-input.component.html',
2431
styleUrls: ['./code-input.component.scss']
2532
})
26-
export class CodeInputComponent implements AfterViewInit, OnInit, OnChanges, AfterViewChecked {
33+
export class CodeInputComponent implements AfterViewInit, OnInit, OnChanges, AfterViewChecked, CodeInputComponentConfig {
2734

2835
@ViewChildren('input') inputsList: QueryList<ElementRef>;
2936

30-
@Input() readonly codeLength = 4;
31-
@Input() readonly isNonDigitsCode = false;
32-
@Input() readonly isCodeHidden = false;
33-
@Input() readonly isPrevFocusableAfterClearing = true;
34-
@Input() readonly isFocusingOnLastByClickIfFilled = false;
35-
@Input() readonly inputType = 'tel';
37+
@Input() readonly codeLength;
38+
@Input() readonly inputType;
3639
@Input() readonly initialFocusField?: number;
37-
@Input() readonly code?: string | number;
40+
/** @deprecated Use isCharsCode prop instead. */
41+
@Input() isNonDigitsCode = false;
42+
@Input() isCharsCode;
43+
@Input() isCodeHidden;
44+
@Input() isPrevFocusableAfterClearing;
45+
@Input() isFocusingOnLastByClickIfFilled;
46+
@Input() code?: string | number;
3847

39-
@Output() codeChanged = new EventEmitter<string>();
40-
@Output() codeCompleted = new EventEmitter<string>();
48+
@Output() readonly codeChanged = new EventEmitter<string>();
49+
@Output() readonly codeCompleted = new EventEmitter<string>();
4150

42-
public placeHolders: number[];
51+
public placeholders: number[];
4352

4453
private inputs: HTMLInputElement[] = [];
4554
private inputsStates: InputState[] = [];
@@ -48,15 +57,33 @@ export class CodeInputComponent implements AfterViewInit, OnInit, OnChanges, Aft
4857
isInitialFocusFieldEnabled: false
4958
};
5059

51-
constructor() {
60+
constructor(@Optional() @Inject(CodeInputComponentConfigToken) config?: CodeInputComponentConfig) {
61+
Object.assign(this, defaultComponentConfig);
62+
63+
if (!config) {
64+
return;
65+
}
66+
67+
// filtering for only valid config props
68+
for (const prop in config) {
69+
if (!config.hasOwnProperty(prop)) {
70+
continue;
71+
}
72+
73+
if (!defaultComponentConfig.hasOwnProperty(prop)) {
74+
continue;
75+
}
76+
77+
this[prop] = config[prop];
78+
}
5279
}
5380

5481
/**
5582
* Life cycle
5683
*/
5784

5885
ngOnInit(): void {
59-
this.placeHolders = Array(this.codeLength).fill(1);
86+
this.placeholders = Array(this.codeLength).fill(1);
6087
this.state.isInitialFocusFieldEnabled = !this.isEmpty(this.initialFocusField);
6188
}
6289

@@ -116,7 +143,7 @@ export class CodeInputComponent implements AfterViewInit, OnInit, OnChanges, Aft
116143
return;
117144
}
118145

119-
// only digits are allowed if isNonDigitsCode flag is absent/false
146+
// only digits are allowed if isCharsCode flag is absent/false
120147
if (!this.canInputValue(value)) {
121148
e.preventDefault();
122149
e.stopPropagation();
@@ -310,7 +337,7 @@ export class CodeInputComponent implements AfterViewInit, OnInit, OnChanges, Aft
310337
}
311338

312339
const isDigitsValue = /^[0-9]+$/.test(value.toString());
313-
return isDigitsValue || this.isNonDigitsCode;
340+
return isDigitsValue || (this.isCharsCode || this.isNonDigitsCode);
314341
}
315342

316343
private setStateForInput(input: HTMLInputElement, state: InputState): void {

‎angular-code-input/src/lib/code-input.module.ts

+13-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import {NgModule} from '@angular/core';
2-
import {CodeInputComponent} from './code-input.component';
1+
import {ModuleWithProviders, NgModule} from '@angular/core';
2+
import {CodeInputComponent } from './code-input.component';
33
import {CommonModule} from '@angular/common';
4+
import {CodeInputComponentConfig, CodeInputComponentConfigToken} from './code-input.component.config';
45

56
@NgModule({
67
imports: [
@@ -13,4 +14,13 @@ import {CommonModule} from '@angular/common';
1314
CodeInputComponent
1415
]
1516
})
16-
export class CodeInputModule {}
17+
export class CodeInputModule {
18+
static forRoot(config: CodeInputComponentConfig): ModuleWithProviders<CodeInputModule> {
19+
return {
20+
ngModule: CodeInputModule,
21+
providers: [
22+
{provide: CodeInputComponentConfigToken, useValue: config }
23+
]
24+
};
25+
}
26+
}

0 commit comments

Comments
 (0)