diff --git a/angular.json b/angular.json
index b6cb4ae..f052b0a 100644
--- a/angular.json
+++ b/angular.json
@@ -22,14 +22,19 @@
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
- "assets": ["src/favicon.ico", "src/assets"],
+ "assets": [
+ "src/favicon.ico",
+ "src/assets"
+ ],
"styles": [
"src/styles.scss",
"./node_modules/quill/dist/quill.core.css",
"./node_modules/quill/dist/quill.bubble.css",
"./node_modules/quill/dist/quill.snow.css"
],
- "scripts": ["node_modules/quill/dist/quill.min.js"],
+ "scripts": [
+ "node_modules/quill/dist/quill.min.js"
+ ],
"aot": true
},
"configurations": {
@@ -87,16 +92,26 @@
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
- "styles": ["src/styles.scss"],
+ "styles": [
+ "src/styles.scss"
+ ],
"scripts": [],
- "assets": ["src/favicon.ico", "src/assets"]
+ "assets": [
+ "src/favicon.ico",
+ "src/assets"
+ ]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
- "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
- "exclude": ["**/node_modules/**"]
+ "tsConfig": [
+ "src/tsconfig.app.json",
+ "src/tsconfig.spec.json"
+ ],
+ "exclude": [
+ "**/node_modules/**"
+ ]
}
}
}
@@ -122,7 +137,9 @@
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
- "exclude": ["**/node_modules/**"]
+ "exclude": [
+ "**/node_modules/**"
+ ]
}
}
}
@@ -156,12 +173,17 @@
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
- "tsConfig": ["projects/simplified-ui/tsconfig.lib.json", "projects/simplified-ui/tsconfig.spec.json"],
- "exclude": ["**/node_modules/**"]
+ "tsConfig": [
+ "projects/simplified-ui/tsconfig.lib.json",
+ "projects/simplified-ui/tsconfig.spec.json"
+ ],
+ "exclude": [
+ "**/node_modules/**"
+ ]
}
}
}
}
},
- "defaultProject": "simplified-ui-library"
+ "defaultProject": "simplified-ui-library",
}
diff --git a/projects/simplified-ui/src/lib/sa-currency-input/sa-currency-input.component.html b/projects/simplified-ui/src/lib/sa-currency-input/sa-currency-input.component.html
index 9c5083e..7c7a346 100644
--- a/projects/simplified-ui/src/lib/sa-currency-input/sa-currency-input.component.html
+++ b/projects/simplified-ui/src/lib/sa-currency-input/sa-currency-input.component.html
@@ -1 +1,2 @@
-
+
+
diff --git a/projects/simplified-ui/src/lib/sa-currency-input/sa-currency-input.component.ts b/projects/simplified-ui/src/lib/sa-currency-input/sa-currency-input.component.ts
index f4dc309..ba3f280 100644
--- a/projects/simplified-ui/src/lib/sa-currency-input/sa-currency-input.component.ts
+++ b/projects/simplified-ui/src/lib/sa-currency-input/sa-currency-input.component.ts
@@ -1,73 +1,83 @@
import {
Component,
- OnDestroy,
- ViewChild,
+ DoCheck,
ElementRef,
+ Inject,
Input,
+ LOCALE_ID,
+ OnDestroy,
+ OnInit,
Optional,
Self,
- OnInit,
- Inject,
- LOCALE_ID,
- DoCheck
+ ViewChild
} from '@angular/core';
import { Subject } from 'rxjs';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { FocusMonitor } from '@angular/cdk/a11y';
import { debounceTime } from 'rxjs/operators';
-import { formatCurrency, getCurrencySymbol } from '@angular/common';
+import {
+ CurrencyPipe,
+ getLocaleCurrencyCode, getLocaleCurrencySymbol,
+ getLocaleNumberFormat, getLocaleNumberSymbol,
+ NumberFormatStyle, NumberSymbol,
+ registerLocaleData
+} from '@angular/common';
import { MatFormFieldControl } from '@angular/material/form-field';
-import { ControlValueAccessor, FormControl, NgControl, Validators } from '@angular/forms';
-import { symbolFormatEnum } from '../pipes/sa-value-formatter.pipe';
+import { ControlValueAccessor, FormControl, NgControl } from '@angular/forms';
+
+/*
+// Register the locale data in the module/component class where this component will be used.
+import localeEs from '@angular/common/locales/es';
+registerLocaleData(localeEs);
+ */
@Component({
selector: 'sa-currency-input',
templateUrl: './sa-currency-input.component.html',
styleUrls: ['./sa-currency-input.component.scss'],
- providers: [{ provide: MatFormFieldControl, useExisting: SaCurrencyInputComponent }]
+ providers: [
+ CurrencyPipe,
+ { provide: MatFormFieldControl, useExisting: SaCurrencyInputComponent },
+ ]
})
-export class SaCurrencyInputComponent
- implements ControlValueAccessor, MatFormFieldControl, OnInit, OnDestroy, DoCheck {
+export class SaCurrencyInputComponent implements ControlValueAccessor, MatFormFieldControl, OnInit, OnDestroy, DoCheck {
@ViewChild('input') inputRef: ElementRef;
+
@Input() allowNegative: boolean = true;
static nextId = 0;
+
private decimalSeparator: string;
+ private groupSeparator: string;
+
public currencyValue = new FormControl();
stateChanges = new Subject();
private _value: any;
- private viewValue: string;
focused = false;
errorState = false;
controlType = 'currency-input';
id = `currency-input-${SaCurrencyInputComponent.nextId++}`;
describedBy = '';
- onChange = (_: any) => {};
- onTouched = () => {};
private _empty = true;
- private symbol: string;
private _disabled = false;
private _placeholder: string;
- constructor(
- private _focusMonitor: FocusMonitor,
- private _elementRef: ElementRef,
- @Optional() @Self() public ngControl: NgControl,
- @Inject(LOCALE_ID) private locale: string
- ) {
- this.decimalSeparator = '.';
- this.symbol = getCurrencySymbol('USD', symbolFormatEnum.narrow);
+ onChange = (_: any) => {};
+ onTouched = () => {};
+
+ constructor(private _focusMonitor: FocusMonitor, private _elementRef: ElementRef, @Optional() @Self() public ngControl: NgControl, @Inject(LOCALE_ID) private locale: string,private currencyPipe: CurrencyPipe) {
+
+ this.groupSeparator = getLocaleNumberSymbol(this.locale, NumberSymbol.CurrencyGroup);
+ this.decimalSeparator = getLocaleNumberSymbol(this.locale, NumberSymbol.CurrencyDecimal);
+
_focusMonitor.monitor(_elementRef, true).subscribe((origin) => {
- if (this.focused && !origin) {
- if (this.viewValue) {
- if (this.parse(this.viewValue))
- this.currencyValue.patchValue(formatCurrency(parseFloat(this.parse(this.viewValue)), 'en-US', this.symbol));
- else this.currencyValue.patchValue('');
+
+ if(this.currencyValue.value != null) {
+ if (origin) {
+ this.currencyValue.setValue(this.parse(this.currencyValue.value));
}
- this.onTouched();
- } else {
- if (this._value) {
- this.currencyValue.patchValue(this.parse(this._value));
+ else {
+ this.currencyValue.setValue(currencyPipe.transform(this.parse(this.currencyValue.value), getLocaleCurrencyCode(this.locale)));
}
}
this.focused = !!origin;
@@ -79,13 +89,6 @@ export class SaCurrencyInputComponent
}
}
- ngOnInit() {
- this.currencyValue.valueChanges.pipe(debounceTime(200)).subscribe((num) => {
- this.viewValue = num;
- this.value = this.parse(num);
- });
- }
-
ngDoCheck(): void {
if (this.ngControl) {
this.errorState = this.ngControl.invalid && this.ngControl.touched;
@@ -98,12 +101,21 @@ export class SaCurrencyInputComponent
this._focusMonitor.stopMonitoring(this._elementRef);
}
+ ngOnInit() {
+ this.currencyValue.valueChanges.pipe(debounceTime(200)).subscribe((num) => {
+ this.value = this.parse(num);
+ });
+ }
+
get empty() {
return this._empty;
}
get shouldLabelFloat() {
- return this.focused || !this.empty;
+ if (!this.focused) {
+ return this.currencyValue.value !== null;
+ }
+ return true;
}
@Input()
@@ -119,10 +131,12 @@ export class SaCurrencyInputComponent
get required(): boolean {
return this._required;
}
+
set required(value: boolean) {
this._required = coerceBooleanProperty(value);
this.stateChanges.next();
}
+
private _required = false;
@Input()
@@ -142,11 +156,7 @@ export class SaCurrencyInputComponent
set value(val: string | null) {
this._value = val;
- if (this._value != null && this._value !== '') {
- this._empty = false;
- } else {
- this._empty = true;
- }
+ this._empty = !(this._value != null && this._value !== '');
this.onChange(this._value);
this.stateChanges.next();
}
@@ -160,7 +170,7 @@ export class SaCurrencyInputComponent
writeValue(val: string | null): void {
if (val != null) {
this._empty = false;
- this.currencyValue.patchValue(formatCurrency(parseFloat(val), 'en-US', this.symbol));
+ this.currencyValue.setValue(this.currencyPipe.transform(this.parse(val),getLocaleCurrencyCode(this.locale)))
}
this.value = val;
}
@@ -182,10 +192,12 @@ export class SaCurrencyInputComponent
}
parse(value: string) {
- let [integer, fraction = ''] = (value.toString() || '').split(this.decimalSeparator);
+ const temp = value.toString().replace(getLocaleCurrencySymbol(this.locale), '');
+ let [integer, fraction = ''] = (temp.toString() || '').split(this.decimalSeparator);
integer = integer.replace(new RegExp(/[^\d\.]/, 'g'), '');
+ integer = integer.replace(this.groupSeparator, '');
fraction = parseInt(fraction, 10) > 0 && 2 > 0 ? this.decimalSeparator + (fraction + '000000').substring(0, 2) : '';
- if (this.allowNegative && (value.toString() || '').startsWith('-')) {
+ if (this.allowNegative && (temp.toString() || '').startsWith('-')) {
return (-1 * parseFloat(integer + fraction)).toString();
} else {
return integer + fraction;
diff --git a/projects/simplified-ui/src/lib/sa-date-picker/sa-date-picker.component.ts b/projects/simplified-ui/src/lib/sa-date-picker/sa-date-picker.component.ts
index f93f1b2..05760db 100644
--- a/projects/simplified-ui/src/lib/sa-date-picker/sa-date-picker.component.ts
+++ b/projects/simplified-ui/src/lib/sa-date-picker/sa-date-picker.component.ts
@@ -9,7 +9,7 @@ import {
HostBinding,
ViewChild,
Output,
- EventEmitter
+ EventEmitter, LOCALE_ID, Inject
} from '@angular/core';
import { ControlValueAccessor, NgControl, FormControl } from '@angular/forms';
import { MatFormFieldControl } from '@angular/material/form-field';
@@ -20,6 +20,7 @@ import { DatePickerConfig, DatePickerType } from '../models/DatePickerConfigMode
import * as moment_ from 'moment-timezone';
const moment = moment_;
import { MOMENT_FORMATS } from '../pipes/sa-date-time.pipe';
+import { DateTimeAdapter } from '@danielmoncada/angular-datetime-picker';
@Component({
selector: 'sa-date-picker',
@@ -149,8 +150,11 @@ export class SaDatePickerComponent
constructor(
@Optional() @Self() public ngControl: NgControl,
private fm: FocusMonitor,
- private elRef: ElementRef
+ private elRef: ElementRef,
+ @Inject(LOCALE_ID) private locale: string, /// Getting LOCALE_ID of our app. (manually set to 'en-IN' in app.module for testing)
+ dateTimeAdapter: DateTimeAdapter /// Injecting DateTimeAdapter to change date time picker's locale
) {
+ dateTimeAdapter.setLocale(this.locale); // Setting our app's LOCALE_ID as date time picker's locale.
if (this.ngControl != null) {
// Setting the value accessor directly (instead of using
// the providers) to avoid running into a circular import.
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 233b312..215eee2 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -52,7 +52,7 @@ Button Component
Currency Inpput Component
Currency
-
+
Filter Component
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 31a4858..0a5a922 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -41,6 +41,8 @@ export class AppComponent implements OnInit {
dateFormats = DateFormats;
+ formControl: FormControl = new FormControl(1234);
+
date = moment.tz(moment(), moment.tz.guess()); //current timezone
date1 = moment.tz(moment(), 'America/Toronto'); //string timezone
date2 = moment.tz(); //UTC timezone