ngx-mask 14.2.4 → 15.0.1

package/README.md

@@ -1,7 +1,11 @@
-<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>
 
+<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/main.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)
@@ -23,8 +27,90 @@ 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 +161,7 @@ const maskConfigFunction: () => Partial<IConfig> = () => {
 
 Then, just define masks in inputs.
 
-### Usage
+## Usage
 
 ```html
 <input type="text" mask="<here goes your mask>" />
@@ -89,21 +175,17 @@ or
 
 Also, you can use mask pipe.
 
-### Usage
-
 ```html
 <span>{{phone | mask: '(000) 000-0000'}}</span>
 ```
 
 For separator you can add thousandSeparator
 
-### Usage
-
 ```html
 <span>{{value | mask: 'separator':','}}</span>
 ```
 
-#### Examples
+### Examples
 
 | mask           | example        |
 | -------------- | -------------- |

package/esm2020/index.mjs

@@ -1,8 +1,8 @@
-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/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-applier.service';
+export * from './lib/ngx-mask.config';
 export * from './lib/custom-keyboard-event';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9wcm9qZWN0cy9uZ3gtbWFzay1saWIvc3JjL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYyxzQkFBc0IsQ0FBQztBQUNyQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsb0JBQW9CLENBQUM7QUFDbkMsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLGNBQWMsQ0FBQztBQUM3QixjQUFjLDZCQUE2QixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9saWIvbmd4LW1hc2subW9kdWxlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL21hc2suZGlyZWN0aXZlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL21hc2sucGlwZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9tYXNrLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvbWFzay1hcHBsaWVyLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29uZmlnJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2N1c3RvbS1rZXlib2FyZC1ldmVudCc7XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9wcm9qZWN0cy9uZ3gtbWFzay1saWIvc3JjL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsMEJBQTBCLENBQUM7QUFDekMsY0FBYywwQkFBMEIsQ0FBQztBQUN6QyxjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYyxnQ0FBZ0MsQ0FBQztBQUMvQyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsNkJBQTZCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2xpYi9uZ3gtbWFzay5wcm92aWRlcnMnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvbmd4LW1hc2suZGlyZWN0aXZlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL25neC1tYXNrLnBpcGUnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvbmd4LW1hc2suc2VydmljZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9uZ3gtbWFzay1hcHBsaWVyLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvbmd4LW1hc2suY29uZmlnJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2N1c3RvbS1rZXlib2FyZC1ldmVudCc7XG4iXX0=