Socket
Socket
Sign inDemoInstall

angular-weblineindia-currency-input

Package Overview
Dependencies
5
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.0.0 to 1.0.1

esm2022/angular-weblineindia-currency-input.mjs
esm2022/lib/angular-weblineindia-currency-input.component.mjs
esm2022/lib/angular-weblineindia-currency-input.module.mjs
esm2022/lib/angular-weblineindia-currency-input.service.mjs
esm2022/lib/numbersOnly.directive.mjs
esm2022/public-api.mjs
fesm2022/angular-weblineindia-currency-input.mjs
fesm2022/angular-weblineindia-currency-input.mjs.map
lib/angular-weblineindia-currency-input.component.d.ts
lib/angular-weblineindia-currency-input.module.d.ts
lib/angular-weblineindia-currency-input.service.d.ts
lib/numbersOnly.directive.d.ts
public-api.d.ts

8

index.d.ts

@@ -1,3 +0,5 @@

export * from './src/currency-mask.directive';
export * from './src/currency-mask.module';
export { CurrencyMaskConfig, CurrencyMaskInputMode } from './src/currency-mask.config';
/**
* Generated bundle index. Do not edit.
*/
/// <amd-module name="angular-weblineindia-currency-input" />
export * from './public-api';

143

package.json
{
"$schema": "./node_modules/ng-packagr/package.schema.json",
"_from": "ngx-currency",
"_id": "ngx-currency@2.3.3",
"_inBundle": false,
"_integrity": "sha512-/5qBdyLC+6zR18eqgPg4gqcJxBfTOspO06Vv2/rAl3lz9JC/1Ctb9psXMWRzYQdgSEaFdqJeCPAYpgxL5Wj14A==",
"_location": "/ngx-currency",
"_phantomChildren": {},
"_requested": {
"type": "tag",
"registry": true,
"raw": "ngx-currency",
"name": "ngx-currency",
"escapedName": "ngx-currency",
"rawSpec": "",
"saveSpec": null,
"fetchSpec": "latest"
"name": "angular-weblineindia-currency-input",
"version": "1.0.1",
"peerDependencies": {
"@angular/common": "^16.2.0",
"@angular/core": "^16.2.0"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npmjs.org/ngx-currency/-/ngx-currency-2.3.3.tgz",
"_shasum": "69aae66bd362d73c377114f211d0da3b8d85d7a3",
"_spec": "ngx-currency",
"_where": "/media/javauser/914fa200-2352-479a-be3f-039edc4d1f6a/home/javauser/angular projects/my-new-app",
"author": {
"name": "Weblineindia"
},
"bundleDependencies": false,
"config": {
"commitizen": {
"path": "node_modules/cz-conventional-changelog"
}
},
"dependencies": {
"tslib": "^1.9.0"
"tslib": "^2.3.0"
},
"deprecated": false,
"description": "Currency Input component is build in AngularJS, used for currency value input field for all countries. You can change prefix and sufix for input. Can also handle negative and positive values depending on requirement.",
"devDependencies": {
"@angular/common": "8.2.14",
"@angular/compiler": "8.2.14",
"@angular/compiler-cli": "8.2.14",
"@angular/core": "8.2.14",
"@angular/forms": "8.2.14",
"@angular/language-service": "8.2.14",
"@angular/platform-browser": "8.2.14",
"@angular/platform-browser-dynamic": "8.2.14",
"@compodoc/compodoc": "^1.1.11",
"@types/chai": "4.1.7",
"@types/html-webpack-plugin": "3.2.0",
"@types/mocha": "5.2.6",
"@types/node": "12.0.0",
"@types/sinon": "7.0.11",
"@types/sinon-chai": "3.2.2",
"@types/webpack": "4.4.31",
"chai": "4.2.0",
"codecov": "3.6.5",
"codelyzer": "4.5.0",
"commitizen": "3.1.1",
"concurrently": "4.1.0",
"core-js": "2.5.4",
"cz-conventional-changelog": "2.1.0",
"del-cli": "1.1.0",
"fork-ts-checker-webpack-plugin": "1.3.1",
"html-webpack-plugin": "3.2.0",
"husky": "2.2.0",
"istanbul-instrumenter-loader": "3.0.1",
"karma": "4.1.0",
"karma-chrome-launcher": "2.2.0",
"karma-coverage": "1.1.2",
"karma-coverage-istanbul-reporter": "2.0.5",
"karma-mocha": "1.3.0",
"karma-mocha-reporter": "2.2.5",
"karma-sourcemap-loader": "0.3.7",
"karma-webpack": "^4.0.0-rc.6",
"mocha": "6.1.4",
"ng-packagr": "^5.7.1",
"nyc": "14.1.0",
"rxjs": "6.5.3",
"rxjs-compat": "6.5.1",
"sinon": "7.3.2",
"sinon-chai": "3.3.0",
"standard-version": "6.0.1",
"ts-loader": "6.0.0",
"ts-node": "7.0.1",
"tslint": "5.12.1",
"tslint-loader": "3.5.4",
"typescript": "3.5.3",
"validate-commit-msg": "2.14.0",
"webpack": "4.31.0",
"webpack-angular-externals": "1.0.2",
"webpack-cli": "3.3.2",
"webpack-dev-server": "3.3.1",
"webpack-rxjs-externals": "2.0.0",
"zone.js": "0.9.1"
},
"es2015": "fesm2015/ngx-currency.js",
"esm2015": "esm2015/ngx-currency.js",
"esm5": "esm5/ngx-currency.js",
"fesm2015": "fesm2015/ngx-currency.js",
"fesm5": "fesm5/ngx-currency.js",
"homepage": "https://www.weblineindia.com/software-development-resources.html",
"husky": {
"hooks": {
"commit-msg": "validate-commit-msg"
"module": "fesm2022/angular-weblineindia-currency-input.mjs",
"typings": "index.d.ts",
"exports": {
"./package.json": {
"default": "./package.json"
},
".": {
"types": "./index.d.ts",
"esm2022": "./esm2022/angular-weblineindia-currency-input.mjs",
"esm": "./esm2022/angular-weblineindia-currency-input.mjs",
"default": "./fesm2022/angular-weblineindia-currency-input.mjs"
}
},
"keywords": [
"angularjs-currency",
"angular-currency-input",
"angular-input-component",
"angularjs-input-field",
"input-field",
"currency-input"
],
"license": "MIT",
"main": "bundles/ngx-currency.umd.js",
"metadata": "ngx-currency.metadata.json",
"module": "fesm5/ngx-currency.js",
"name": "angular-weblineindia-currency-input",
"repository": {
"type": "git",
"url": "git+https://github.com/weblineindia/AngularJS-Currency-Input"
},
"sideEffects": false,
"typings": "ngx-currency.d.ts",
"version": "1.0.0"
}
"sideEffects": false
}

244

README.md

@@ -1,44 +0,51 @@

# AngularJS - Currency Input Component
# Angular - Currency Input Component
Currency Input component is build in AngularJS, used for currency value input field for all countries. You can change prefix and sufix for input. Can also handle negative and positive values depending on requirement.
An Angular-based currency input component for adding currency field.
# Table of contents
## Table of contents
- [Browser Support](#browser-support)
- [Demo](#demo)
- [Getting started](#getting-started)
- [Quick fixes](#quick-fixes)
- [Usage](#usage)
- [Available Props](#available-props)
- [Methods](#methods)
- [Want to Contribute?](#want-to-contribute)
- [Need Help / Support?](#need-help)
- [Collection of Other Components](#collection-of-components)
- [Collection of Components](#collection-of-components)
- [Changelog](#changelog)
- [Credits](#credits)
- [License](#license)
- [Keywords](#Keywords)
## Browser Support
| ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) |
| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| 83.0 ✔ | 77.0 ✔ | 13.1.1 ✔ | 83.0 ✔ | 11.9 ✔ |
## Demo
[![](currencyDemo.png)](https://github.com/weblineindia/AngularJS-Currency-Input/currencyDemo.png)
[![](textNg.gif)](https://github.com/weblineindia/AngularJS-Text-Box/textNg.gif)
## Getting Started
## Getting started
### Installing and Importing
Install the npm package:
Install the package by command:
```sh
npm install angular-weblineindia-currency-input --save
```bash
npm install angular-weblineindia-currency-input
#OR
yarn add angular-weblineindia-currency-input
```
Import the module
## Usage
```ts
import { NgxCurrencyModule } from "angular-weblineindia-currency-input";
Use the `<angular-weblineindia-currency-input>` component:
Add in app.module.ts file
```typescript
import { NgModule } from "@angular/core";
import { AngularWeblineindiaCurrencyInputModule } from "angular-weblineindia-currency-input";
@NgModule({
imports: [
...
NgxCurrencyModule
],
declarations: [...],
providers: [...]
imports: [AngularWeblineindiaCurrencyInputModule],
})

@@ -48,125 +55,94 @@ export class AppModule {}

### Using
Add in app.component.ts file
```html
<input currencyMask formControlName="value" />
```typescript
export class AppComponent {
constructor() {}
isInvalidPhoneNumber: boolean = false;
invalidMessage: string = "onFocusHandler(event: any): void";
onFocusHandler(event: any): void {
console.log("onFocusHandler: ", event.target.value);
}
onBlurHandler(event: any): void {
console.log("onBlurHandler: ", event.target.value);
}
onChangeHandler(event: any): void {
console.log("onChangeHandler: ", event.target.value);
}
onKeyPressHandler(event: any): void {
console.log("onKeyPressHandler: ", event.target.value);
}
onKeyDownHandler(event: any): void {
console.log("onKeyDownHandler: ", event.target.value);
}
onKeyUpHandler(event: any): void {
console.log("onKeyUpHandler: ", event.target.value);
}
}
```
- `ngModel` An attribute of type number. If is displayed `'$ 25.63'`, the attribute will be `'25.63'`.
Add in app.component.html file
### Options
You can set options...
```html
<!-- example for pt-BR money -->
<input
currencyMask
formControlName="value"
[options]="{ prefix: 'R$ ', thousands: '.', decimal: ',' }"
/>
<angular-weblineindia-currency-input
name="myInputName"
[value]="203000.45"
classname="currency-input"
errorClass="errorMessage"
placeholder="Enter amount here"
[disabled]="true"
[required]="false"
[prefix]="'$Rs'"
[isInvalidPhoneNumber]="isInvalidPhoneNumber"
[invalidMessage]="invalidMessage"
(focus)="onFocusHandler($event)"
(blur)="onBlurHandler($event)"
(change)="onChangeHandler($event)"
(keyPress)="onKeyPressHandler($event)"
(keyDown)="onKeyDownHandler($event)"
(keyUp)="onKeyUpHandler($event)"
>
</angular-weblineindia-currency-input>
```
Available options:
Add in app.component.css file
- `align` - Text alignment in input. (default: `right`)
- `allowNegative` - If `true` can input negative values. (default: `true`)
- `decimal` - Separator of decimals (default: `'.'`)
- `precision` - Number of decimal places (default: `2`)
- `prefix` - Money prefix (default: `'$ '`)
- `suffix` - Money suffix (default: `''`)
- `thousands` - Separator of thousands (default: `','`)
- `nullable` - when true, the value of the clean field will be `null`, when false the value will be `0`
- `min` - The minimum value (default: `undefined`)
- `max` - The maximum value (default: `undefined`)
- `inputMode` - Determines how to handle numbers as the user types them (default: `FINANCIAL`)
```typescript
::ng-deep .currency-input {
Input Modes:
}
- `FINANCIAL` - Numbers start at the highest precision decimal. Typing a number shifts numbers left.
The decimal character is ignored. Most cash registers work this way. For example:
- Typing `'12'` results in `'0.12'`
- Typing `'1234'` results in `'12.34'`
- Typing `'1.234'` results in `'12.34'`
- `NATURAL` - Numbers start to the left of the decimal. Typing a number to the left of the decimal shifts
numbers left; typing to the right of the decimal replaces the next number. Most text inputs
and spreadsheets work this way. For example:
- Typing `'1234'` results in `'1234'`
- Typing `'1.234'` results in `'1.23'`
- Typing `'12.34'` results in `'12.34'`
- Typing `'123.4'` results in `'123.40'`
::ng-deep .errorClass {
color: RED;
margin: 0;
}
You can also set options globally...
```ts
import { CurrencyMaskInputMode, NgxCurrencyModule } from "angular-weblineindia-currency-input";
export const customCurrencyMaskConfig = {
align: "right",
allowNegative: true,
allowZero: true,
decimal: ",",
precision: 2,
prefix: "R$ ",
suffix: "",
thousands: ".",
nullable: true,
min: null,
max: null,
inputMode: CurrencyMaskInputMode.FINANCIAL
};
@NgModule({
imports: [
...
NgxCurrencyModule.forRoot(customCurrencyMaskConfig)
],
declarations: [...],
providers: [...],
bootstrap: [AppComponent]
})
export class AppModule {}
```
## Quick fixes
## Available Props
### Ionic 2-3
| Prop | Type | default | Description |
| ----------------- | ------- | ------- | ---------------------------------------------- |
| name | String | | Name for the input |
| value | String | | Initial value of input |
| classname | String | false | CSS class applied for curency input. |
| errorClass | String | | CSS class applied for error message |
| placeholder | String | | The input field will get this placeholder text |
| required | boolean | false | If true, makes the input field mandatory. |
| disabled | boolean | false | If true, disables the input field. |
| prefix | String | | To set currency type |
| isInvalidPassword | boolean | false | Indicates if the currency is invalid |
| invalidMessage | String | | Message to display when the currncy is invalid |
Input not working on mobile keyboard
## Methods
```html
<!-- Change the type to 'tel' -->
<input currencyMask type="tel" formControlName="value" />
```
| Name | Description |
| -------- | ---------------------------------------------------------------- |
| focus | Gets triggered when the autocomplete input field receives focus. |
| blur | Gets triggered when the autocomplete input field loses focus. |
| keyPress | Gets triggered when a key gets pressed. |
| keyDown | Gets triggered when a key gets down. |
| keyUp | Gets triggered when a key gets up. |
Input focus get hide by the mobile keyboard
on HTML
```html
<!-- Change the type to 'tel' -->
<input
currencyMask
type="tel"
formControlName="value"
[id]="'yourInputId' + index"
(focus)="scrollTo(index)"
/>
```
on .ts
```ts
import { Content } from 'ionic-angular';
export class...
@ViewChild(Content) content: Content;
scrollTo(index) {
let yOffset = document.getElementById('yourInputId' + index).offsetTop;
this.content.scrollTo(0, yOffset + 20);
}
```
## Want to Contribute?

@@ -184,3 +160,3 @@

We have built many other components and free resources for software development in various programming languages. Kindly click here to view our [Free Resources for Software Development](https://www.weblineindia.com/software-development-resources.html).
We have built many other components and free resources for software development in various programming languages. Kindly click here to view our [Free Resources for Software Development](https://www.weblineindia.com/software-development-resources.html)

@@ -193,6 +169,2 @@ ---

## Credits
angular-weblineindia-currency-input is inspired by [ngx-currency](https://www.npmjs.com/package/ngx-currency).
## License

@@ -202,6 +174,6 @@

[mit]: https://github.com/weblineindia/AngularJS-Currency-Input/blob/master/LICENSE
[mit]: https://github.com/weblineindia/AngularJS-Text-Box/blob/master/LICENSE
## Keywords
angularjs-currency, angular-currency-input, angular-input-component, angularjs-input-field, input-field, currency-input
angular-weblineindia-currency-input, currencyInput, input, angular, angular-component, currencyInput-component, currencyInput-box
bundles/ngx-currency.umd.js
bundles/ngx-currency.umd.js.map
bundles/ngx-currency.umd.min.js
bundles/ngx-currency.umd.min.js.map
CHANGELOG.md
currencyDemo.png
esm2015/index.js
esm2015/ngx-currency.js
esm2015/src/currency-mask.config.js
esm2015/src/currency-mask.directive.js
esm2015/src/currency-mask.module.js
esm2015/src/input.handler.js
esm2015/src/input.manager.js
esm2015/src/input.service.js
esm5/index.js
esm5/ngx-currency.js
esm5/src/currency-mask.config.js
esm5/src/currency-mask.directive.js
esm5/src/currency-mask.module.js
esm5/src/input.handler.js
esm5/src/input.manager.js
esm5/src/input.service.js
fesm2015/ngx-currency.js
fesm2015/ngx-currency.js.map
fesm5/ngx-currency.js
fesm5/ngx-currency.js.map
index.ts
LICENSE
ngx-currency.d.ts
ngx-currency.metadata.json
src/currency-mask.config.d.ts
src/currency-mask.directive.d.ts
src/currency-mask.module.d.ts
src/input.handler.d.ts
src/input.manager.d.ts
src/input.service.d.ts
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc