Skip to content

Commit f1421b8

Browse files
xCMSjQueryxCMSjQuery
authored
Merge pull request #1 from AlexMiniApps/master
resync fork
2 parents 7921989 + 37b6ba5 commit f1421b8

File tree

8 files changed

+4814
-8433
lines changed

8 files changed

+4814
-8433
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ npm-debug.log
4040
yarn-error.log
4141
testem.log
4242
/typings
43+
.angular
4344

4445
# System Files
4546
.DS_Store

‎README.md‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
![](https://badgen.net/badge/icon/typescript?icon=typescript&label&color=99aabb)
66
![](https://img.shields.io/github/license/AlexMiniApps/angular-code-input?color=00ccbb)
77

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

@@ -19,7 +19,7 @@ Preview
1919

2020
## Supported platforms
2121

22-
<b>Angular</b> 7, 8, 9, 10, 11, 12 +<br />
22+
<b>Angular</b> 7, 8, 9, 10, 11, 12, 14 +<br />
2323
<b>Ionic</b> 4, 5 +<br />
2424
Mobile browsers and WebViews on: <b>Android</b> and <b>iOS</b><br />
2525
Desktop browsers: <b>Chrome, Firefox, Safari, Edge v.79 +</b><br />
@@ -67,7 +67,7 @@ Include the component on page template HTML:
6767
[codeLength]="5"
6868
(codeChanged)="onCodeChanged($event)"
6969
(codeCompleted)="onCodeCompleted($event)">
70-
</code-input>
70+
</code-input>
7171
```
7272

7373
Inside a page script:
@@ -92,21 +92,22 @@ It is possible to configure the component via CSS vars
9292

9393
CSS vars:
9494

95-
| CSS Var | Description |
96-
|----------|--------------------|
97-
| `--text-security-type: disc;` | Text presentation type when the isCodeHidden is enabled |
98-
| `--item-spacing: 4px;` | Horizontal space between input items |
99-
| `--item-height: 4.375em;` | Height of input items |
100-
| `--item-border: 1px solid #dddddd;` | Border of input item for an empty value |
101-
| `--item-border-bottom: 1px solid #dddddd;` | Bottom border of input item for an empty value |
102-
| `--item-border-has-value: 1px solid #dddddd;` | Border of input item with a value |
103-
| `--item-border-bottom-has-value: 1px solid #dddddd;` | Bottom border of input item with a value |
104-
| `--item-border-focused: 1px solid #dddddd;` | Border of input item when focused |
105-
| `--item-border-bottom-focused: 1px solid #dddddd;` | Bottom border of input item when focused |
106-
| `--item-shadow-focused: 0px 1px 5px rgba(221, 221, 221, 1);` | Shadow of input item when focused |
107-
| `--item-border-radius: 5px;` | Border radius of input item |
108-
| `--item-background: transparent;` | Input item background |
109-
| `--color: #171516;` | Text color of input items |
95+
| CSS Var | Description |
96+
|--------------------------------------------------------------|--------------------------------------------------------|
97+
| `--text-security-type: disc;` | Text presentation type when the isCodeHidden is enabled |
98+
| `--item-spacing: 4px;` | Horizontal space between input items |
99+
| `--item-height: 4.375em;` | Height of input items |
100+
| `--item-border: 1px solid #dddddd;` | Border of input item for an empty value |
101+
| `--item-border-bottom: 1px solid #dddddd;` | Bottom border of input item for an empty value |
102+
| `--item-border-has-value: 1px solid #dddddd;` | Border of input item with a value |
103+
| `--item-border-bottom-has-value: 1px solid #dddddd;` | Bottom border of input item with a value |
104+
| `--item-border-focused: 1px solid #dddddd;` | Border of input item when focused |
105+
| `--item-border-bottom-focused: 1px solid #dddddd;` | Bottom border of input item when focused |
106+
| `--item-shadow-focused: 0px 1px 5px rgba(221, 221, 221, 1);` | Shadow of input item when focused |
107+
| `--item-border-radius: 5px;` | Border radius of input item |
108+
| `--item-background: transparent;` | Input item background |
109+
| `--item-font-weight: 300;` | Font weight of input item |
110+
| `--color: #171516;` | Text color of input items |
110111

111112
Example with only bottom borders:
112113

@@ -158,10 +159,10 @@ It can be reached as follows.
158159
Inside the page template HTML add a template ref:
159160

160161
```html
161-
<code-input
162-
...
163-
#codeInput
164-
...
162+
<code-input
163+
...
164+
#codeInput
165+
...
165166
>
166167
</code-input>
167168
```

‎angular-code-input/README.md‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Code/pincode input component for angular
1+
# Code/pincode input component for angular
22

33
![](https://img.shields.io/npm/dm/angular-code-input?color=55aa33)
44
![](https://img.shields.io/github/stars/AlexMiniApps/angular-code-input)
@@ -86,27 +86,28 @@ Inside a page script:
8686

8787
#### View
8888

89-
It is possible to configure the component via CSS vars
89+
It is possible to configure the component via CSS vars
9090
<br />or using `::ng-deep` (deprecated) angular CSS selector
9191
[::ng-deep](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep)
9292

9393
CSS vars:
9494

95-
| CSS Var | Description |
96-
|----------|--------------------|
97-
| `--text-security-type: disc;` | Text presentation type when the isCodeHidden is enabled |
98-
| `--item-spacing: 4px;` | Horizontal space between input items |
99-
| `--item-height: 4.375em;` | Height of input items |
100-
| `--item-border: 1px solid #dddddd;` | Border of input item for an empty value |
101-
| `--item-border-bottom: 1px solid #dddddd;` | Bottom border of input item for an empty value |
102-
| `--item-border-has-value: 1px solid #dddddd;` | Border of input item with a value |
103-
| `--item-border-bottom-has-value: 1px solid #dddddd;` | Bottom border of input item with a value |
104-
| `--item-border-focused: 1px solid #dddddd;` | Border of input item when focused |
105-
| `--item-border-bottom-focused: 1px solid #dddddd;` | Bottom border of input item when focused |
106-
| `--item-shadow-focused: 0px 1px 5px rgba(221, 221, 221, 1);` | Shadow of input item when focused |
107-
| `--item-border-radius: 5px;` | Border radius of input item |
108-
| `--item-background: transparent;` | Input item background |
109-
| `--color: #171516;` | Text color of input items |
95+
| CSS Var | Description |
96+
|--------------------------------------------------------------|--------------------------------------------------------|
97+
| `--text-security-type: disc;` | Text presentation type when the isCodeHidden is enabled |
98+
| `--item-spacing: 4px;` | Horizontal space between input items |
99+
| `--item-height: 4.375em;` | Height of input items |
100+
| `--item-border: 1px solid #dddddd;` | Border of input item for an empty value |
101+
| `--item-border-bottom: 1px solid #dddddd;` | Bottom border of input item for an empty value |
102+
| `--item-border-has-value: 1px solid #dddddd;` | Border of input item with a value |
103+
| `--item-border-bottom-has-value: 1px solid #dddddd;` | Bottom border of input item with a value |
104+
| `--item-border-focused: 1px solid #dddddd;` | Border of input item when focused |
105+
| `--item-border-bottom-focused: 1px solid #dddddd;` | Bottom border of input item when focused |
106+
| `--item-shadow-focused: 0px 1px 5px rgba(221, 221, 221, 1);` | Shadow of input item when focused |
107+
| `--item-border-radius: 5px;` | Border radius of input item |
108+
| `--item-background: transparent;` | Input item background |
109+
| `--item-font-weight: 300;` | Font weight of input item |
110+
| `--color: #171516;` | Text color of input items |
110111

111112
Example with only bottom borders:
112113

@@ -158,12 +159,12 @@ It can be reached as follows.
158159
Inside the page template HTML add a template ref:
159160

160161
```html
161-
<code-input
162-
...
163-
#codeInput
164-
...
165-
>
166-
</code-input>
162+
<code-input
163+
...
164+
#codeInput
165+
...
166+
>
167+
</code-input>
167168
```
168169

169170
Inside a page script attach the component:

‎angular-code-input/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "angular-code-input",
33
"version": "1.6.0",
4-
"description": "Code or pin code input for Angular 7 - 12 + / Ionic 4, 5 + projects",
4+
"description": "Code or pin code input for Angular 7 - 12, 14 + / 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.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
(input)="onInput($event, i)"
77
(keydown)="onKeydown($event, i)"
88
[type]="inputType"
9-
[inputmode]="inputMode"
109
[disabled]="disabled"
10+
[attr.inputmode]="inputMode"
1111
[attr.autocapitalize]="autocapitalize"
1212
autocomplete="one-time-code"/>
1313
</span>

0 commit comments

Comments
 (0)