ngx-mask 14.2.3 → 14.3.0

package/README.md

@@ -1,8 +1,12 @@
-<a href="https://jsdaddy.github.io/ngx-mask">
-  <h1 align="center">ngx-mask</h1>
+<a href="http://jsdaddy.io/img/logo.png">
+  <h1 align="center">NGX MASK</h1>
 </a>
 
-[![CI](https://github.com/JsDaddy/ngx-mask/actions/workflows/main.yml/badge.svg?branch=develop)](https://github.com/JsDaddy/ngx-mask/actions/workflows/main.yml)
+<p align="center">
+  NGX MASK is the best directive to solve masking input with needed pattern
+</p>
+
+[![CI](https://github.com/JsDaddy/ngx-mask/actions/workflows/quality-check.yml/badge.svg?branch=develop)](https://github.com/JsDaddy/ngx-mask/actions/workflows/main.yml)
 [![npm](https://img.shields.io/npm/v/ngx-mask.svg)](https://www.npmjs.com/package/ngx-mask)
 [![npm downloads](https://img.shields.io/npm/dt/ngx-mask.svg)](https://npmjs.org/ngx-mask)
 
@@ -12,10 +16,11 @@
 
 [![GitHub stars](https://img.shields.io/github/stars/JSDaddy/ngx-mask.svg?label=GitHub%20Stars&style=flat)](https://github.com/JSDaddy/ngx-mask)
 
-You can also try our [NGX LOADER INDICATOR](https://www.npmjs.com/package/ngx-loader-indicator).
-You can also try our [NGX COPYPASTE](https://www.npmjs.com/package/ngx-copypaste).
+You can also try our NGX LOADER INDICATOR [check](https://www.npmjs.com/package/ngx-loader-indicator).
+You can also try our NGX COPYPASTE [check](https://www.npmjs.com/package/ngx-copypaste).
+
+### You can try live [documentation](https://jsdaddy.github.io/ngx-mask/) with examples
 
-### You can see the full [documentation](https://jsdaddy.github.io/ngx-mask-page/) with examples
 
 ## Installing
 
@@ -23,8 +28,92 @@ You can also try our [NGX COPYPASTE](https://www.npmjs.com/package/ngx-copypaste
 $ npm install --save ngx-mask
 ```
 
-## Quickstart
+## Quickstart if ngx-mask version >= 15.0.0
+
+Import **ngx-mask** directive, pipe and provide NgxMask providers with `provideNgxMask` function.
+
+### With default config options application level
+
+```typescript
+bootstrapApplication(AppComponent, {
+    providers: [
+        (...)
+        provideEnvironmentNgxMask(),
+        (...)
+    ],
+}).catch((err) => console.error(err));
+```
+
+### Passing your own mask config options
+
+```typescript
+import { IConfig } from 'ngx-mask'
+
+const maskConfig: Partial<IConfig> = {
+  validation: false,
+};
+
+bootstrapApplication(AppComponent, {
+    providers: [
+        (...)
+        provideEnvironmentNgxMask(maskConfig),
+        (...)
+    ],
+}).catch((err) => console.error(err));
+```
+
+### Using a function to configure:
+
+```typescript
+const maskConfigFunction: () => Partial<IConfig> = () => {
+  return {
+    validation: false,
+  };
+};
+
+bootstrapApplication(AppComponent, {
+    providers: [
+         (...)
+         provideEnvironmentNgxMask(maskConfigFunction),
+         (...)
+],
+}).catch((err) => console.error(err));
+```
+
+### With config options feature level
+
+```typescript
+@Component({
+    selector: 'my-feature',
+    templateUrl: './my-feature.component.html',
+    styleUrls: ['./my-feature.component.css'],
+    standalone: true,
+    imports: [NgxMaskDirective, (...)],
+    providers: [
+          (...)
+          provideNgxMask(),
+          (...)
+    ],
+})
+export class MyFeatureComponent {}
+```
+
+Then, import directive, pipe to needed standalone component and just define masks in inputs.
+
+### With Angular modules
+
+```typescript
+@NgModule({
+  imports: [
+      NgxMaskDirective, NgxMaskPipe
+  ],
+  providers: [provideNgxMask()]
+})
+```
+
+## Quickstart if ngx-mask version < 15.0.0
 
+For version ngx-mask < 15.0.0
 Import **ngx-mask** module in Angular app.
 
 ### With default mask config options
@@ -75,7 +164,7 @@ const maskConfigFunction: () => Partial<IConfig> = () => {
 
 Then, just define masks in inputs.
 
-### Usage
+## Usage
 
 ```html
 <input type="text" mask="<here goes your mask>" />
@@ -89,21 +178,17 @@ or
 
 Also, you can use mask pipe.
 
-### Usage
-
 ```html
 <span>{{phone | mask: '(000) 000-0000'}}</span>
 ```
 
-For separator you can add thousandSeparator
-
-### Usage
+You could path any valid config options, for example thousandSeparator and suffix
 
 ```html
-<span>{{value | mask: 'separator':','}}</span>
+<span>{{value | mask: 'separator': {thousandSeparator: ',', suffix: ' sm'}}</span>
 ```
 
-#### Examples
+### Examples
 
 | mask           | example        |
 | -------------- | -------------- |
@@ -193,10 +278,10 @@ You can define custom pattern and specify symbol to be rendered in input field.
 
 ```typescript
 pattern = {
-  B: {
-    pattern: new RegExp('\\d'),
-    symbol: 'X',
-  },
+    B: {
+        pattern: new RegExp('\\d'),
+        symbol: 'X',
+    },
 };
 ```
 
@@ -294,9 +379,9 @@ and in your component
 customMask: [string, pattern];
 
 pattern = {
-  P: {
-    pattern: new RegExp('\\d'),
-  },
+    P: {
+        pattern: new RegExp('\\d'),
+    },
 };
 
 this.customMask = ['PPP-PPP', this.pattern];
@@ -367,6 +452,18 @@ Masked value: 1.234
 Input value: 1234.56
 Masked value: 1,234
 ```
+```html
+<input type="text" mask="separator.2" [leadZero]="true" />
+```
+To add zeros to the model at the end 
+
+```text
+Input value: 12
+Masked value: 12.00
+
+Input value: 12.1
+Masked value: 12.10
+```
 
 ```html
 <input type="text" mask="separator.2" separatorLimit="1000" />
@@ -469,7 +566,7 @@ You can hide symbols in input field and get the actual value in `formcontrol`.
 <input mask="CPF_CNPJ" />
 ```
 
-### Dynamic valid mask
+### Allow few mask in one expression
 
 #### Usage
 
@@ -483,6 +580,10 @@ You can pass into mask pattern with `||`.
 <input mask="(00) 0000-0000||(00) 0 0000-0000" />
 ```
 
+```html
+<input mask="00||SS" />
+```
+
 ### Function maskFilled
 
 #### Usage

package/esm2020/index.mjs

@@ -1,8 +1,6 @@
-export * from './lib/ngx-mask.module';
-export * from './lib/mask.directive';
-export * from './lib/mask.pipe';
-export * from './lib/mask.service';
-export * from './lib/mask-applier.service';
-export * from './lib/config';
-export * from './lib/custom-keyboard-event';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9wcm9qZWN0cy9uZ3gtbWFzay1saWIvc3JjL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYyxzQkFBc0IsQ0FBQztBQUNyQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsb0JBQW9CLENBQUM7QUFDbkMsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLGNBQWMsQ0FBQztBQUM3QixjQUFjLDZCQUE2QixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9saWIvbmd4LW1hc2subW9kdWxlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL21hc2suZGlyZWN0aXZlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL21hc2sucGlwZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9tYXNrLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvbWFzay1hcHBsaWVyLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29uZmlnJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2N1c3RvbS1rZXlib2FyZC1ldmVudCc7XG4iXX0=
+export * from './lib/ngx-mask.providers';
+export * from './lib/ngx-mask.directive';
+export * from './lib/ngx-mask.pipe';
+export * from './lib/ngx-mask.service';
+export * from './lib/ngx-mask.config';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9wcm9qZWN0cy9uZ3gtbWFzay1saWIvc3JjL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsMEJBQTBCLENBQUM7QUFDekMsY0FBYywwQkFBMEIsQ0FBQztBQUN6QyxjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYyx1QkFBdUIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vbGliL25neC1tYXNrLnByb3ZpZGVycyc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9uZ3gtbWFzay5kaXJlY3RpdmUnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvbmd4LW1hc2sucGlwZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9uZ3gtbWFzay5zZXJ2aWNlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL25neC1tYXNrLmNvbmZpZyc7XG4iXX0=

package/esm2020/lib/custom-keyboard-event.mjs

@@ -9,8 +9,9 @@ const commonjsGlobal = typeof globalThis !== 'undefined'
                 : {};
 (function () {
     if (!commonjsGlobal.KeyboardEvent) {
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         commonjsGlobal.KeyboardEvent = function (_eventType, _init) { };
     }
 })();
 export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3VzdG9tLWtleWJvYXJkLWV2ZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LW1hc2stbGliL3NyYy9saWIvY3VzdG9tLWtleWJvYXJkLWV2ZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdBLE1BQU0sY0FBYyxHQUNuQixPQUFPLFVBQVUsS0FBSyxXQUFXO0lBQ2hDLENBQUMsQ0FBQyxVQUFVO0lBQ1osQ0FBQyxDQUFDLE9BQU8sTUFBTSxLQUFLLFdBQVc7UUFDL0IsQ0FBQyxDQUFDLE1BQU07UUFDUixDQUFDLENBQUMsT0FBTyxNQUFNLEtBQUssV0FBVztZQUMvQixDQUFDLENBQUMsTUFBTTtZQUNSLENBQUMsQ0FBQyxPQUFPLElBQUksS0FBSyxXQUFXO2dCQUM3QixDQUFDLENBQUMsSUFBSTtnQkFDTixDQUFDLENBQUMsRUFBRSxDQUFDO0FBRVAsQ0FBQztJQUNBLElBQUksQ0FBQyxjQUFjLENBQUMsYUFBYSxFQUFFO1FBQ2xDLGNBQWMsQ0FBQyxhQUFhLEdBQUcsVUFBVSxVQUFlLEVBQUUsS0FBVSxJQUFHLENBQUMsQ0FBQztLQUN6RTtBQUNGLENBQUMsQ0FBQyxFQUFFLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBlc2xpbnQtZGlzYWJsZSBAdHlwZXNjcmlwdC1lc2xpbnQvbm8tZXhwbGljaXQtYW55ICovXG5kZWNsYXJlIHZhciBnbG9iYWw6IGFueTtcblxuY29uc3QgY29tbW9uanNHbG9iYWwgPVxuXHR0eXBlb2YgZ2xvYmFsVGhpcyAhPT0gJ3VuZGVmaW5lZCdcblx0XHQ/IGdsb2JhbFRoaXNcblx0XHQ6IHR5cGVvZiB3aW5kb3cgIT09ICd1bmRlZmluZWQnXG5cdFx0PyB3aW5kb3dcblx0XHQ6IHR5cGVvZiBnbG9iYWwgIT09ICd1bmRlZmluZWQnXG5cdFx0PyBnbG9iYWxcblx0XHQ6IHR5cGVvZiBzZWxmICE9PSAndW5kZWZpbmVkJ1xuXHRcdD8gc2VsZlxuXHRcdDoge307XG5cbihmdW5jdGlvbiAoKSB7XG5cdGlmICghY29tbW9uanNHbG9iYWwuS2V5Ym9hcmRFdmVudCkge1xuXHRcdGNvbW1vbmpzR2xvYmFsLktleWJvYXJkRXZlbnQgPSBmdW5jdGlvbiAoX2V2ZW50VHlwZTogYW55LCBfaW5pdDogYW55KSB7fTtcblx0fVxufSkoKTtcblxuZXhwb3J0IHR5cGUgQ3VzdG9tS2V5Ym9hcmRFdmVudCA9IEtleWJvYXJkRXZlbnQ7XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3VzdG9tLWtleWJvYXJkLWV2ZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LW1hc2stbGliL3NyYy9saWIvY3VzdG9tLWtleWJvYXJkLWV2ZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdBLE1BQU0sY0FBYyxHQUNoQixPQUFPLFVBQVUsS0FBSyxXQUFXO0lBQzdCLENBQUMsQ0FBQyxVQUFVO0lBQ1osQ0FBQyxDQUFDLE9BQU8sTUFBTSxLQUFLLFdBQVc7UUFDL0IsQ0FBQyxDQUFDLE1BQU07UUFDUixDQUFDLENBQUMsT0FBTyxNQUFNLEtBQUssV0FBVztZQUMvQixDQUFDLENBQUMsTUFBTTtZQUNSLENBQUMsQ0FBQyxPQUFPLElBQUksS0FBSyxXQUFXO2dCQUM3QixDQUFDLENBQUMsSUFBSTtnQkFDTixDQUFDLENBQUMsRUFBRSxDQUFDO0FBRWIsQ0FBQztJQUNHLElBQUksQ0FBQyxjQUFjLENBQUMsYUFBYSxFQUFFO1FBQy9CLGdFQUFnRTtRQUNoRSxjQUFjLENBQUMsYUFBYSxHQUFHLFVBQVUsVUFBZSxFQUFFLEtBQVUsSUFBRyxDQUFDLENBQUM7S0FDNUU7QUFDTCxDQUFDLENBQUMsRUFBRSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyogZXNsaW50LWRpc2FibGUgQHR5cGVzY3JpcHQtZXNsaW50L25vLWV4cGxpY2l0LWFueSAqL1xuZGVjbGFyZSBsZXQgZ2xvYmFsOiBhbnk7XG5cbmNvbnN0IGNvbW1vbmpzR2xvYmFsID1cbiAgICB0eXBlb2YgZ2xvYmFsVGhpcyAhPT0gJ3VuZGVmaW5lZCdcbiAgICAgICAgPyBnbG9iYWxUaGlzXG4gICAgICAgIDogdHlwZW9mIHdpbmRvdyAhPT0gJ3VuZGVmaW5lZCdcbiAgICAgICAgPyB3aW5kb3dcbiAgICAgICAgOiB0eXBlb2YgZ2xvYmFsICE9PSAndW5kZWZpbmVkJ1xuICAgICAgICA/IGdsb2JhbFxuICAgICAgICA6IHR5cGVvZiBzZWxmICE9PSAndW5kZWZpbmVkJ1xuICAgICAgICA/IHNlbGZcbiAgICAgICAgOiB7fTtcblxuKGZ1bmN0aW9uICgpIHtcbiAgICBpZiAoIWNvbW1vbmpzR2xvYmFsLktleWJvYXJkRXZlbnQpIHtcbiAgICAgICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uby1lbXB0eS1mdW5jdGlvblxuICAgICAgICBjb21tb25qc0dsb2JhbC5LZXlib2FyZEV2ZW50ID0gZnVuY3Rpb24gKF9ldmVudFR5cGU6IGFueSwgX2luaXQ6IGFueSkge307XG4gICAgfVxufSkoKTtcblxuZXhwb3J0IHR5cGUgQ3VzdG9tS2V5Ym9hcmRFdmVudCA9IEtleWJvYXJkRXZlbnQ7XG4iXX0=