ngx-mask - npm Package Compare versions

Comparing version 13.1.15 to 13.2.0-test

index.d.ts

 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';
+export * from './lib/ngx-mask.directive';
+export * from './lib/ngx-mask.pipe';
+export * from './lib/ngx-mask.service';
+export * from './lib/ngx-mask.config';

lib/ngx-mask.module.d.ts

 import { ModuleWithProviders } from '@angular/core';
-import { optionsConfig } from './config';
+import { optionsConfig } from './ngx-mask.config';
 import * as i0 from "@angular/core";
-import * as i1 from "./mask.directive";
-import * as i2 from "./mask.pipe";
+import * as i1 from "./ngx-mask.directive";
+import * as i2 from "./ngx-mask.pipe";
 /**
@@ -14,4 +14,4 @@ * @internal
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxMaskModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NgxMaskModule, [typeof i1.MaskDirective, typeof i2.MaskPipe], never, [typeof i1.MaskDirective, typeof i2.MaskPipe]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NgxMaskModule, [typeof i1.NgxMaskDirective, typeof i2.NgxMaskPipe], never, [typeof i1.NgxMaskDirective, typeof i2.NgxMaskPipe]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NgxMaskModule>;
 }

package.json

 {
   "name": "ngx-mask",
-  "version": "13.1.15",
+  "version": "13.2.0-test",
   "description": "awesome ngx mask",
@@ -30,10 +30,6 @@ "keywords": [
   },
-  "main": "./bundles/ngx-mask.umd.js",
-  "module": "fesm2015/ngx-mask.mjs",
-  "es2015": "./esm2015/ngx-mask.js",
-  "typings": "ngx-mask.d.ts",
   "peerDependencies": {
-    "@angular/common": ">=10.0.0",
-    "@angular/core": ">=10.0.0",
-    "@angular/forms": ">=10.0.0"
+    "@angular/common": ">=12.0.0",
+    "@angular/core": ">=12.0.0",
+    "@angular/forms": ">=12.0.0"
   },
@@ -43,2 +39,3 @@ "dependencies": {
   },
+  "module": "fesm2015/ngx-mask.mjs",
   "es2020": "fesm2020/ngx-mask.mjs",
@@ -48,2 +45,3 @@ "esm2020": "esm2020/ngx-mask.mjs",
   "fesm2015": "fesm2015/ngx-mask.mjs",
+  "typings": "index.d.ts",
   "exports": {
@@ -54,3 +52,3 @@ "./package.json": {
     ".": {
-      "types": "./ngx-mask.d.ts",
+      "types": "./index.d.ts",
       "esm2020": "./esm2020/ngx-mask.mjs",
@@ -57,0 +55,0 @@ "es2020": "./fesm2020/ngx-mask.mjs",

README.md

@@ -1,6 +0,10 @@
-<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)
@@ -15,7 +19,8 @@ [![npm downloads](https://img.shields.io/npm/dt/ngx-mask.svg)](https://npmjs.org/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 see the full [documentation](https://jsdaddy.github.io/ngx-mask-page/) with examples
+### You can try live [documentation](https://jsdaddy.github.io/ngx-mask/) with examples
 
+
 ## Installing
@@ -27,4 +32,88 @@
 
-## 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.
@@ -37,3 +126,3 @@
 
-export const options: Partial<IConfig> | (() => Partial<IConfig>) = null;
+export const options: Partial<null|IConfig> | (() => Partial<IConfig>) = null;
 
@@ -81,3 +170,3 @@ @NgModule({
 
-### Usage
+## Usage
 
@@ -96,4 +185,2 @@ ```html
 
-### Usage
-
 ```html
@@ -103,11 +190,9 @@ <span>{{phone | mask: '[phone]'}}</span>
 
-For separator you can add thousandSeparator
+You could path any valid config options, for example thousandSeparator and suffix
 
-### Usage
-
 ```html
-<span>{{value | mask: 'separator':','}}</span>
+<span>{{value | mask: 'separator': {thousandSeparator: ',', suffix: ' sm'}}</span>
 ```
 
-#### Examples
+### Examples
 
@@ -202,6 +287,6 @@ | mask           | example        |
 pattern = {
-  B: {
-    pattern: new RegExp('\\d'),
-    symbol: 'X',
-  },
+    B: {
+        pattern: new RegExp('\\d'),
+        symbol: 'X',
+    },
 };
@@ -304,5 +389,5 @@ ```
 pattern = {
-  P: {
-    pattern: new RegExp('\\d'),
-  },
+    P: {
+        pattern: new RegExp('\\d'),
+    },
 };
@@ -378,3 +463,15 @@
 ```
+```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
@@ -481,3 +578,3 @@ <input type="text" mask="separator.2" separatorLimit="1000" />
 
-### Dynamic valid mask
+### Allow few mask in one expression
 
@@ -496,2 +593,6 @@ #### Usage
 
+```html
+<input mask="00||SS" />
+```
+
 ### Function maskFilled
@@ -498,0 +599,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1108738

increased by61.42%

Number of package files

26

increased by4%

Lines of code

7491

increased by41.69%

Number of lines in readme file

594

increased by20.49%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes