Skip to content

Commit 386c750

Browse files
Alex-Alex-HereAlex-Alex-Here
committed
Have added the component
1 parent 0a59160 commit 386c750

23 files changed

+7378
-666
lines changed

‎LICENSE

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
Copyright (c) 2019 Alexander Dmitrenko
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy
4+
of this software and associated documentation files (the "Software"), to deal
5+
in the Software without restriction, including without limitation the rights
6+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7+
copies of the Software, and to permit persons to whom the Software is furnished
8+
to do so, subject to the following conditions:
9+
10+
The above copyright notice and this permission notice shall
11+
be included in all copies or substantial portions of the Software.
12+
13+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
14+
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
15+
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
16+
THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
17+
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎README.md

Lines changed: 91 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,104 @@
1-
# MyWorkspace
1+
# Code/pincode input component for angular
22

3-
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.9.
3+
Code (number/chars) input component for angular 7+ projects.<br />
4+
Ionic 4+ is supported, can be used in iOS and Android.
45

5-
## Development server
6+
Preview
67

7-
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
8+
## Installation
89

9-
## Code scaffolding
10+
$ npm install --save angular-code-input
1011

11-
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12+
## Usage
1213

13-
## Build
14+
Import `CodeInputModule` in your app module or page module:
1415

15-
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
16+
```ts
17+
import { CodeInputModule } from 'angular-code-input';
1618

17-
## Running unit tests
19+
@NgModule({
20+
imports: [
21+
// ...
22+
CodeInputModule
23+
]
24+
})
25+
```
1826

19-
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
27+
Include the component on page template HTML:
2028

21-
## Running end-to-end tests
29+
```html
30+
<code-input [isCodeHidden]="false"
31+
[isNonDigitsCode]="false"
32+
[codeLength]="4"
33+
(codeChanged)="onCodeChanged($event)"
34+
(codeCompleted)="onCodeCompleted($event)">
35+
</code-input>
36+
```
2237

23-
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
38+
Inside a page script:
2439

25-
## Further help
40+
```ts
41+
// this called every time when user changed the code
42+
onCodeChanged(code: string) {
43+
}
44+
45+
// this called only if user entered full code
46+
onCodeCompleted(code: string) {
47+
}
48+
```
49+
50+
## Configuration
51+
52+
#### View
53+
54+
It is possible to configure the component via CSS vars
55+
<br />or using `::ng-deep` (deprecated) angular CSS selector
56+
[::ng-deep](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep)
57+
58+
CSS vars:
59+
60+
`--text-security-type: disc;` - text presentation type when the isCodeHidden is enabled<br />
61+
`--item-spacing: 4px;` - horizontal space between input items <br />
62+
`--item-height: 4.375em;` - height of input items <br />
63+
`--item-border: 1px solid #dddddd;` - border of input item for an empty value <br />
64+
`--item-border-bottom: 1px solid #dddddd;` - bottom border of input item for an empty value <br />
65+
`--item-border-has-value: 1px solid #dddddd;` - border of input item with a value <br />
66+
`--item-border-bottom-has-value: 1px solid #dddddd;` - bottom border of input item with a value <br />
67+
`--item-border-focused: 1px solid #dddddd;` - border of input item when focused <br />
68+
`--item-border-bottom-focused: 1px solid #dddddd;` - bottom border of input item when focused <br />
69+
`--item-shadow-focused: 0px 1px 5px rgba(221, 221, 221, 1);` - shadow of input item when focused <br />
70+
`--item-border-radius: 5px;` - border radius of input item <br />
71+
`--item-background: transparent;` - input item background <br />
72+
`--color: #171516;` - text color of input items <br />
73+
74+
Example with only bottom borders:
75+
76+
````
77+
/* inside page styles*/
78+
...
79+
code-input {
80+
--item-spacing: 10px;
81+
--item-height: 3em;
82+
--item-border: none;
83+
--item-border-bottom: 2px solid #dddddd;
84+
--item-border-has-value: none;
85+
--item-border-bottom-has-value: 2px solid #888888;
86+
--item-border-focused: none;
87+
--item-border-bottom-focused: 2px solid #809070;
88+
--item-shadow-focused: none;
89+
--item-border-radius: 0px;
90+
}
91+
...
92+
````
93+
94+
#### Component options
95+
96+
`codeLength: number` - length of input code <br />
97+
`isCodeHidden: boolean` - when `true` inputted code chars will be shown as asterisks (points)<br />
98+
`isNonDigitsCode: boolean` - when `true` inputted code can contain any char and not only digits from 0 to 9 <br />
99+
100+
#### Events
101+
102+
`codeChanged` - will be called every time when a user changed the code <br />
103+
`codeCompleted` - will be called only if a user entered full code
26104

27-
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

‎angular-code-input/CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# 1.0.0 (28.12.2019)
2+
**Note:** Initial build.

‎angular-code-input/LICENSE

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
Copyright (c) 2019 Alexander Dmitrenko
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy
4+
of this software and associated documentation files (the "Software"), to deal
5+
in the Software without restriction, including without limitation the rights
6+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7+
copies of the Software, and to permit persons to whom the Software is furnished
8+
to do so, subject to the following conditions:
9+
10+
The above copyright notice and this permission notice shall
11+
be included in all copies or substantial portions of the Software.
12+
13+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
14+
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
15+
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
16+
THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
17+
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎angular-code-input/README.md

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
# Code/pincode input component for angular
2+
3+
Code (number/chars) input component for angular 7+ projects.<br />
4+
Ionic 4+ is supported, can be used in iOS and Android.
5+
6+
Preview
7+
8+
## Installation
9+
10+
$ npm install --save angular-code-input
11+
12+
## Usage
13+
14+
Import `CodeInputModule` in your app module or page module:
15+
16+
```ts
17+
import { CodeInputModule } from 'angular-code-input';
18+
19+
@NgModule({
20+
imports: [
21+
// ...
22+
CodeInputModule
23+
]
24+
})
25+
```
26+
27+
Include the component on page template HTML:
28+
29+
```html
30+
<code-input [isCodeHidden]="false"
31+
[isNonDigitsCode]="false"
32+
[codeLength]="4"
33+
(codeChanged)="onCodeChanged($event)"
34+
(codeCompleted)="onCodeCompleted($event)">
35+
</code-input>
36+
```
37+
38+
Inside a page script:
39+
40+
```ts
41+
// this called every time when user changed the code
42+
onCodeChanged(code: string) {
43+
}
44+
45+
// this called only if user entered full code
46+
onCodeCompleted(code: string) {
47+
}
48+
```
49+
50+
## Configuration
51+
52+
#### View
53+
54+
It is possible to configure the component via CSS vars
55+
<br />or using `::ng-deep` (deprecated) angular CSS selector
56+
[::ng-deep](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep)
57+
58+
CSS vars:
59+
60+
`--text-security-type: disc;` - text presentation type when the isCodeHidden is enabled<br />
61+
`--item-spacing: 4px;` - horizontal space between input items <br />
62+
`--item-height: 4.375em;` - height of input items <br />
63+
`--item-border: 1px solid #dddddd;` - border of input item for an empty value <br />
64+
`--item-border-bottom: 1px solid #dddddd;` - bottom border of input item for an empty value <br />
65+
`--item-border-has-value: 1px solid #dddddd;` - border of input item with a value <br />
66+
`--item-border-bottom-has-value: 1px solid #dddddd;` - bottom border of input item with a value <br />
67+
`--item-border-focused: 1px solid #dddddd;` - border of input item when focused <br />
68+
`--item-border-bottom-focused: 1px solid #dddddd;` - bottom border of input item when focused <br />
69+
`--item-shadow-focused: 0px 1px 5px rgba(221, 221, 221, 1);` - shadow of input item when focused <br />
70+
`--item-border-radius: 5px;` - border radius of input item <br />
71+
`--item-background: transparent;` - input item background <br />
72+
`--color: #171516;` - text color of input items <br />
73+
74+
Example with only bottom borders:
75+
76+
````
77+
/* inside page styles*/
78+
...
79+
code-input {
80+
--item-spacing: 10px;
81+
--item-height: 3em;
82+
--item-border: none;
83+
--item-border-bottom: 2px solid #dddddd;
84+
--item-border-has-value: none;
85+
--item-border-bottom-has-value: 2px solid #888888;
86+
--item-border-focused: none;
87+
--item-border-bottom-focused: 2px solid #809070;
88+
--item-shadow-focused: none;
89+
--item-border-radius: 0px;
90+
}
91+
...
92+
````
93+
94+
#### Component options
95+
96+
`codeLength: number` - length of input code <br />
97+
`isCodeHidden: boolean` - when `true` inputted code chars will be shown as asterisks (points)<br />
98+
`isNonDigitsCode: boolean` - when `true` inputted code can contain any char and not only digits from 0 to 9 <br />
99+
100+
#### Events
101+
102+
`codeChanged` - will be called every time when a user changed the code <br />
103+
`codeCompleted` - will be called only if a user entered full code
104+

‎angular-code-input/karma.conf.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// Karma configuration file, see link for more information
2+
// https://karma-runner.github.io/1.0/config/configuration-file.html
3+
4+
module.exports = function (config) {
5+
config.set({
6+
basePath: '',
7+
frameworks: ['jasmine', '@angular-devkit/build-angular'],
8+
plugins: [
9+
require('karma-jasmine'),
10+
require('karma-chrome-launcher'),
11+
require('karma-jasmine-html-reporter'),
12+
require('karma-coverage-istanbul-reporter'),
13+
require('@angular-devkit/build-angular/plugins/karma')
14+
],
15+
client: {
16+
clearContext: false // leave Jasmine Spec Runner output visible in browser
17+
},
18+
coverageIstanbulReporter: {
19+
dir: require('path').join(__dirname, '../coverage/angular-code-input'),
20+
reports: ['html', 'lcovonly'],
21+
fixWebpackSourcePaths: true
22+
},
23+
reporters: ['progress', 'kjhtml'],
24+
port: 9876,
25+
colors: true,
26+
logLevel: config.LOG_INFO,
27+
autoWatch: true,
28+
browsers: ['Chrome'],
29+
singleRun: false,
30+
restartOnFileChange: true
31+
});
32+
};

‎angular-code-input/ng-package.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"$schema": "../node_modules/ng-packagr/ng-package.schema.json",
3+
"dest": "../dist/angular-code-input",
4+
"lib": {
5+
"entryFile": "src/public-api.ts"
6+
}
7+
}

‎angular-code-input/package.json

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "angular-code-input",
3+
"version": "1.0.0",
4+
"description": "Code or pin code input for angular 7+ / ionic 4 + projects",
5+
"keywords": ["angular", "pincode", "angular-pincode", "otp", "code-input", "angular-otp", "ionic-otp", "ionic-code-input", "ionic-pincode"],
6+
"author": "Alexander Dmitrenko",
7+
"license": "MIT",
8+
"peerDependencies": {
9+
"@angular/common": "^7.2.0",
10+
"@angular/core": "^7.2.0"
11+
}
12+
}

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<span *ngFor="let holder of placeHolders; index as i"
2+
class="custom-class"
3+
[class.empty]="state.isEmpty"
4+
[class.code-hidden]="isCodeHidden">
5+
<input #input
6+
(input)="onInput($event, i)"
7+
(keydown)="onKeydown($event, i)"
8+
type="tel"/>
9+
</span>
10+
11+
12+

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
:host {
2+
--text-security-type: disc;
3+
--item-spacing: 4px;
4+
--item-height: 4.375em;
5+
--item-border: 1px solid #dddddd;
6+
--item-border-bottom: 1px solid #dddddd;
7+
--item-border-has-value: 1px solid #dddddd;
8+
--item-border-bottom-has-value: 1px solid #dddddd;
9+
--item-border-focused: 1px solid #dddddd;
10+
--item-border-bottom-focused: 1px solid #dddddd;
11+
--item-shadow-focused: 0px 1px 5px rgba(221, 221, 221, 1);
12+
--item-border-radius: 5px;
13+
--item-background: transparent;
14+
--color: #171516;
15+
16+
display: flex;
17+
transform: translate3d(0, 0, 0);
18+
font-size: inherit;
19+
color: var(--color);
20+
21+
span {
22+
display: block;
23+
flex: 1;
24+
padding-right: var(--item-spacing);
25+
26+
&:first-child {
27+
padding-left: var(--item-spacing);
28+
}
29+
30+
&.code-hidden input {
31+
text-security: var(--text-security-type);
32+
-webkit-text-security: var(--text-security-type);
33+
-moz-text-security: var(--text-security-type);
34+
}
35+
}
36+
37+
input {
38+
width: 100%;
39+
height: var(--item-height);
40+
color: inherit;
41+
background: var(--item-background);
42+
text-align: center;
43+
font-size: inherit;
44+
border: var(--item-border);
45+
border-bottom: var(--item-border-bottom);
46+
border-radius: var(--item-border-radius);
47+
-webkit-appearance: none;
48+
transform: translate3d(0, 0, 0);
49+
-webkit-transform: translate3d(0, 0, 0);
50+
outline: none;
51+
52+
&.has-value {
53+
border: var(--item-border-has-value);
54+
border-bottom: var(--item-border-bottom-has-value);
55+
}
56+
57+
&:focus {
58+
border: var(--item-border-focused);
59+
border-bottom: var(--item-border-bottom-focused);
60+
box-shadow: var(--item-shadow-focused);
61+
}
62+
}
63+
}

0 commit comments

Comments
 (0)