resync fork

.gitignore

@@ -40,6 +40,7 @@ npm-debug.log
 yarn-error.log
 testem.log
 /typings
+.angular
 
 # System Files
 .DS_Store

README.md

@@ -5,7 +5,7 @@
 ![](https://badgen.net/badge/icon/typescript?icon=typescript&label&color=99aabb)
 ![](https://img.shields.io/github/license/AlexMiniApps/angular-code-input?color=00ccbb)
 
-Robust and <b>tested</b> code (number/chars) input component for Angular 7 - 12+ projects.<br />
+Robust and <b>tested</b> code (number/chars) input component for Angular 7 - 12, 14+ projects.<br />
 Ionic 4, 5 + is supported, can be used in iOS and Android.<br />
 <b>Clipboard</b> events are supported.
 
@@ -19,7 +19,7 @@ Preview
 
 ## Supported platforms
 
-<b>Angular</b> 7, 8, 9, 10, 11, 12 +<br />
+<b>Angular</b> 7, 8, 9, 10, 11, 12, 14 +<br />
 <b>Ionic</b> 4, 5 +<br />
 Mobile browsers and WebViews on: <b>Android</b> and <b>iOS</b><br />
 Desktop browsers: <b>Chrome, Firefox, Safari, Edge v.79 +</b><br />
@@ -67,7 +67,7 @@ Include the component on page template HTML:
               [codeLength]="5"
               (codeChanged)="onCodeChanged($event)"
               (codeCompleted)="onCodeCompleted($event)">
-  </code-input>
+</code-input>
 ```
 
 Inside a page script:
@@ -92,21 +92,22 @@ It is possible to configure the component via CSS vars
 
 CSS vars:
 
-| CSS Var  | Description        |          
-|----------|--------------------|
-| `--text-security-type: disc;` | Text presentation type when the isCodeHidden is enabled |
-| `--item-spacing: 4px;` | Horizontal space between input items |
-| `--item-height: 4.375em;` | Height of input items |
-| `--item-border: 1px solid #dddddd;` | Border of input item for an empty value |
-| `--item-border-bottom: 1px solid #dddddd;` | Bottom border of input item for an empty value |
-| `--item-border-has-value: 1px solid #dddddd;` | Border of input item with a value |
-| `--item-border-bottom-has-value: 1px solid #dddddd;` | Bottom border of input item with a value |
-| `--item-border-focused: 1px solid #dddddd;` | Border of input item when focused |
-| `--item-border-bottom-focused: 1px solid #dddddd;` | Bottom border of input item when focused |
-| `--item-shadow-focused: 0px 1px 5px rgba(221, 221, 221, 1);` | Shadow of input item when focused |
-| `--item-border-radius: 5px;` | Border radius of input item |
-| `--item-background: transparent;` | Input item background |
-| `--color: #171516;` | Text color of input items |
+| CSS Var                                                      | Description                                            |          
+|--------------------------------------------------------------|--------------------------------------------------------|
+| `--text-security-type: disc;`                                | Text presentation type when the isCodeHidden is enabled |
+| `--item-spacing: 4px;`                                       | Horizontal space between input items                   |
+| `--item-height: 4.375em;`                                    | Height of input items                                  |
+| `--item-border: 1px solid #dddddd;`                          | Border of input item for an empty value                |
+| `--item-border-bottom: 1px solid #dddddd;`                   | Bottom border of input item for an empty value         |
+| `--item-border-has-value: 1px solid #dddddd;`                | Border of input item with a value                      |
+| `--item-border-bottom-has-value: 1px solid #dddddd;`         | Bottom border of input item with a value               |
+| `--item-border-focused: 1px solid #dddddd;`                  | Border of input item when focused                      |
+| `--item-border-bottom-focused: 1px solid #dddddd;`           | Bottom border of input item when focused               |
+| `--item-shadow-focused: 0px 1px 5px rgba(221, 221, 221, 1);` | Shadow of input item when focused                      |
+| `--item-border-radius: 5px;`                                 | Border radius of input item                            |
+| `--item-background: transparent;`                            | Input item background                                  |
+| `--item-font-weight: 300;`                                   | Font weight of input item                              |
+| `--color: #171516;`                                          | Text color of input items                              |
 
 Example with only bottom borders:
 
@@ -158,10 +159,10 @@ It can be reached as follows.
 Inside the page template HTML add a template ref:
 
 ```html
-  <code-input
-        ...
-        #codeInput
-        ...
+<code-input
+  ...
+  #codeInput
+  ...
 >
 </code-input>
 ```

angular-code-input/README.md

@@ -1,4 +1,4 @@
-# Code/pincode input component for angular 
+# Code/pincode input component for angular
 
 ![](https://img.shields.io/npm/dm/angular-code-input?color=55aa33)
 ![](https://img.shields.io/github/stars/AlexMiniApps/angular-code-input)
@@ -86,27 +86,28 @@ Inside a page script:
 
 #### View
 
-It is possible to configure the component via CSS vars 
+It is possible to configure the component via CSS vars
 <br />or using `::ng-deep` (deprecated) angular CSS selector
 [::ng-deep](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep)
 
 CSS vars:
 
-| CSS Var  | Description        |          
-|----------|--------------------|
-| `--text-security-type: disc;` | Text presentation type when the isCodeHidden is enabled |
-| `--item-spacing: 4px;` | Horizontal space between input items |
-| `--item-height: 4.375em;` | Height of input items |
-| `--item-border: 1px solid #dddddd;` | Border of input item for an empty value |
-| `--item-border-bottom: 1px solid #dddddd;` | Bottom border of input item for an empty value |
-| `--item-border-has-value: 1px solid #dddddd;` | Border of input item with a value |
-| `--item-border-bottom-has-value: 1px solid #dddddd;` | Bottom border of input item with a value |
-| `--item-border-focused: 1px solid #dddddd;` | Border of input item when focused |
-| `--item-border-bottom-focused: 1px solid #dddddd;` | Bottom border of input item when focused |
-| `--item-shadow-focused: 0px 1px 5px rgba(221, 221, 221, 1);` | Shadow of input item when focused |
-| `--item-border-radius: 5px;` | Border radius of input item |
-| `--item-background: transparent;` | Input item background |
-| `--color: #171516;` | Text color of input items |
+| CSS Var                                                      | Description                                            |          
+|--------------------------------------------------------------|--------------------------------------------------------|
+| `--text-security-type: disc;`                                | Text presentation type when the isCodeHidden is enabled |
+| `--item-spacing: 4px;`                                       | Horizontal space between input items                   |
+| `--item-height: 4.375em;`                                    | Height of input items                                  |
+| `--item-border: 1px solid #dddddd;`                          | Border of input item for an empty value                |
+| `--item-border-bottom: 1px solid #dddddd;`                   | Bottom border of input item for an empty value         |
+| `--item-border-has-value: 1px solid #dddddd;`                | Border of input item with a value                      |
+| `--item-border-bottom-has-value: 1px solid #dddddd;`         | Bottom border of input item with a value               |
+| `--item-border-focused: 1px solid #dddddd;`                  | Border of input item when focused                      |
+| `--item-border-bottom-focused: 1px solid #dddddd;`           | Bottom border of input item when focused               |
+| `--item-shadow-focused: 0px 1px 5px rgba(221, 221, 221, 1);` | Shadow of input item when focused                      |
+| `--item-border-radius: 5px;`                                 | Border radius of input item                            |
+| `--item-background: transparent;`                            | Input item background                                  |
+| `--item-font-weight: 300;`                                   | Font weight of input item                              |
+| `--color: #171516;`                                          | Text color of input items                              |
 
 Example with only bottom borders:
 
@@ -158,12 +159,12 @@ It can be reached as follows.
 Inside the page template HTML add a template ref:
 
 ```html
-  <code-input 
-    ...
-    #codeInput
-    ...
-  >
-  </code-input>
+<code-input
+  ...
+  #codeInput
+  ...
+>
+</code-input>
 ```
 
 Inside a page script attach the component:

angular-code-input/package.json

@@ -1,7 +1,7 @@
 {
   "name": "angular-code-input",
   "version": "1.6.0",
-  "description": "Code or pin code input for Angular 7 - 12 + / Ionic 4, 5 + projects",
+  "description": "Code or pin code input for Angular 7 - 12, 14 + / Ionic 4, 5 + projects",
   "keywords": ["angular", "pincode", "angular-pincode",  "otp", "code-input", "angular-otp", "ionic-otp", "ionic-code-input", "ionic-pincode"],
   "author": "Alexander Dmitrenko",
   "license": "MIT",

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

@@ -6,8 +6,8 @@
          (input)="onInput($event, i)"
          (keydown)="onKeydown($event, i)"
          [type]="inputType"
-         [inputmode]="inputMode"
          [disabled]="disabled"
+         [attr.inputmode]="inputMode"
          [attr.autocapitalize]="autocapitalize"
          autocomplete="one-time-code"/>
 </span>