added mat currency input field

angular.json

@@ -4,6 +4,9 @@
   "newProjectRoot": "projects",
   "projects": {
     "material-mentions": {
+      "i18n": {
+        "sourceLocale": "de"
+      },
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {

src/app/currency-input/currency-input.component.html

@@ -0,0 +1,6 @@
+<div>
+    <input #input [value]="formattedValue()" [readonly]="disabled" [attr.placeholder]="placeholder"
+        [attr.aria-describedby]="userAriaDescribedBy" [attr.required]="required" (input)="onUserInput($event)"
+        (keydown)="onInputKeyDown($event)" (keypress)="onInputKeyPress($event)" (paste)="onPaste($event)"
+        (focus)="onFocusIn($event)" (blur)="onFocusOut($event)" />
+</div>

src/app/currency-input/currency-input.component.scss

@@ -0,0 +1,16 @@
+div {
+    display: flex;
+    width: 100%;
+}
+
+input {
+    flex-grow: 1;
+
+    border: none;
+    background: none;
+    padding: 0;
+    outline: none;
+    font: inherit;
+    text-align: right;
+    color: currentColor;
+}

src/app/currency-input/currency-input.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CurrencyInputComponent } from './currency-input.component';
+
+describe('CurrencyInputComponent', () => {
+  let component: CurrencyInputComponent;
+  let fixture: ComponentFixture<CurrencyInputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CurrencyInputComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CurrencyInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/currency-input/currency-input.component.ts

@@ -0,0 +1,873 @@
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Component, ElementRef, HostBinding, Inject, Input, LOCALE_ID, Optional, Self, ViewChild } from '@angular/core';
+import { ControlValueAccessor, NgControl, Validators } from '@angular/forms';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import { Subject } from 'rxjs';
+
+interface FormatterOptions {
+  useGrouping: boolean,
+  minimumFractionDigits: number,
+  maximumFractionDigits: number
+}
+
+@Component({
+  selector: 'app-currency-input',
+  imports: [],
+  providers: [{ provide: MatFormFieldControl, useExisting: CurrencyInputComponent }],
+  templateUrl: './currency-input.component.html',
+  styleUrl: './currency-input.component.scss'
+})
+export class CurrencyInputComponent implements MatFormFieldControl<number>, ControlValueAccessor {
+
+  constructor(@Optional() @Self() public ngControl: NgControl, @Inject(LOCALE_ID) public locale: string) {
+    // Replace the provider from above with this.
+    if (this.ngControl != null) {
+      // Setting the value accessor directly (instead of using
+      // the providers) to avoid running into a circular import.
+      this.ngControl.valueAccessor = this;
+    }
+
+    this.constructParsers();
+  }
+
+  ngAfterViewInit(): void {
+    if (this.ngControl)
+      this.required = this.ngControl.control?.hasValidator(Validators.required);
+    // if (this.commentText !== '') {
+    //   this._commentInputRef.nativeElement.innerHTML = this.commentText;
+    //   this.onChange(this.commentText);
+    //   this.stateChanges.next()
+    // }
+  }
+
+  ngOnDestroy() { this.stateChanges.complete(); }
+
+  // ==================================================
+  // => Everything related to custom form field control
+  // ==================================================
+  static nextId = 0;
+  @HostBinding() id = `currency-input-${CurrencyInputComponent.nextId++}`;
+  @HostBinding('class.floating')
+
+  @Input('aria-describedby') userAriaDescribedBy: string = '';
+  @Input()
+  get value(): number | null {
+    return this.inputValue;
+  }
+  set value(value: number | null) {
+    this.inputValue = value ?? 0;
+  }
+  @Input()
+  get placeholder() {
+    return this._placeholder;
+  }
+  set placeholder(plh) {
+    this._placeholder = plh;
+    this.stateChanges.next();
+  }
+  get shouldLabelFloat() {
+    return this.focused || !this.empty;
+  }
+  @Input()
+  get required(): boolean { return this._required; }
+  set required(req: BooleanInput) {
+    this._required = coerceBooleanProperty(req);
+    this.stateChanges.next();
+  }
+  @Input()
+  get disabled(): boolean { return this._disabled; }
+  set disabled(value: BooleanInput) {
+    this._disabled = coerceBooleanProperty(value);
+    this.stateChanges.next();
+  }
+
+  inputValue: number | null = null;
+  controlType = 'currency-input';
+  stateChanges = new Subject<void>();
+  private _placeholder: string = '';
+  private _required = false;
+  private _disabled = false;
+  focused = false;
+  touched = false;
+
+  onChange = (value: number | null) => { };
+  onTouched = () => { };
+
+  writeValue(value: number): void {
+    this.inputValue = value;
+    // throw new Error('Method not implemented.');
+  }
+  registerOnChange(onChange: any): void {
+    this.onChange = onChange;
+    // throw new Error('Method not implemented.');
+  }
+  registerOnTouched(onTouched: any): void {
+    this.onTouched = onTouched;
+    // throw new Error('Method not implemented.');
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  onFocusIn(event: FocusEvent) {
+    if (!this.focused) {
+      this.focused = true;
+      this.stateChanges.next();
+    }
+  }
+
+  onFocusOut(event: FocusEvent) {
+    // if (!this._commentInputRef.nativeElement.contains(event.relatedTarget as Element)) {
+    //   this.cleanEmptyElements(this._commentInputRef.nativeElement);
+    //   this.commentText = this._commentInputRef.nativeElement.innerHTML;
+    //   this.touched = true;
+    //   this.focused = false;
+    //   this.onTouched();
+    //   this.onChange(this.commentText);
+    //   this.stateChanges.next();
+    // }
+    this.touched = true;
+    this.focused = false;
+    this.onTouched();
+    this.onChange(this.inputValue);
+    this.stateChanges.next();
+  }
+
+  setDescribedByIds(ids: string[]) {
+    const controlElement = this.input?.nativeElement;
+    controlElement?.setAttribute('aria-describedby', ids.join(' '));
+  }
+
+  onContainerClick(event: MouseEvent) {
+    this.input.nativeElement.focus();
+  }
+
+  get empty(): boolean {
+    return this.inputValue === null;
+  }
+
+  get errorState(): boolean {
+    return this.touched && this.required && this.inputValue === null;
+  }
+
+
+
+
+  // ==================================================
+  // => Everything related to custom form field control
+  // ==================================================
+
+  @ViewChild('input') input!: ElementRef<HTMLInputElement>;
+
+  isSpecialChar: boolean | null | undefined = undefined;
+  lastValue: string | null | undefined = undefined;
+  min: number = 0;
+  groupChar: string = '';
+  maxFractionDigits = 2;
+  maxLength?: number;
+
+  _numeral: any;
+  _decimal: any;
+  _decimalChar: string = '';
+  _group: any;
+  _minusSign: any;
+  _index: number | any;
+
+  get allowMinusSign(): boolean {
+    return this.min == null || this.min < 0;
+  }
+
+  get formatterOptions(): FormatterOptions {
+    return {
+      useGrouping: true,
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    }
+  }
+
+
+  constructParsers() {
+    const numerals = [...new Intl.NumberFormat(this.locale, { useGrouping: false }).format(9876543210)].reverse();
+    const index = new Map(numerals.map((d, i) => [d, i]));
+    this._numeral = new RegExp(`[${numerals.join('')}]`, 'g');
+    this._group = this.getGroupingExpression();
+    this._minusSign = this.getMinusSignExpression();
+    this._decimal = this.getDecimalExpression();
+    this._decimalChar = this.getDecimalChar();
+    this._index = (d: any) => index.get(d);
+  }
+
+  getDecimalExpression(): RegExp {
+    const decimalChar = this.getDecimalChar();
+    return new RegExp(`[${decimalChar}]`, 'g');
+  }
+
+  getDecimalChar(): string {
+    const formatter = new Intl.NumberFormat(this.locale, { useGrouping: false });
+    return formatter
+      .format(1.1)
+      .trim()
+      .replace(this._numeral, '');
+  }
+
+  getGroupingExpression(): RegExp {
+    const formatter = new Intl.NumberFormat(this.locale, { useGrouping: true });
+    this.groupChar = formatter.format(1000000).trim().replace(this._numeral, '').charAt(0);
+    return new RegExp(`[${this.groupChar}]`, 'g');
+  }
+
+  getMinusSignExpression(): RegExp {
+    const formatter = new Intl.NumberFormat(this.locale, { useGrouping: false });
+    return new RegExp(`[${formatter.format(-1).trim().replace(this._numeral, '')}]`, 'g');
+  }
+
+  isMinusSign(char: string) {
+    if (this._minusSign.test(char) || char === '-') {
+      this._minusSign.lastIndex = 0;
+      return true;
+    }
+
+    return false;
+  }
+
+  isDecimalSign(char: string) {
+    if (this._decimal.test(char)) {
+      this._decimal.lastIndex = 0;
+      return true;
+    }
+
+    return false;
+  }
+
+  parseValue(text: any) {
+    let filteredText = text
+      .trim()
+      .replace(/\s/g, '')
+      .replace(this._group, '')
+      .replace(this._minusSign, '-')
+      .replace(this._decimal, '.')
+      .replace(this._numeral, this._index);
+
+    if (filteredText) {
+      if (filteredText === '-')
+        // Minus sign
+        return filteredText;
+
+      let parsedValue = +filteredText;
+      return isNaN(parsedValue) ? null : parsedValue;
+    }
+
+    return null;
+  }
+
+  getCharIndexes(val: string) {
+    const decimalCharIndex = val.search(this._decimal);
+    this._decimal.lastIndex = 0;
+    const minusCharIndex = val.search(this._minusSign);
+    this._minusSign.lastIndex = 0;
+
+    return { decimalCharIndex, minusCharIndex };
+  }
+
+
+
+  onUserInput(event: Event) {
+    if (this.disabled) {
+      return;
+    }
+
+    if (this.isSpecialChar) {
+      (event.target as HTMLInputElement).value = this.lastValue as string;
+    }
+    this.isSpecialChar = false;
+  }
+
+  onInputKeyDown(event: KeyboardEvent) {
+    if (this.disabled) {
+      return;
+    }
+
+    this.lastValue = (event.target as HTMLInputElement).value;
+    if ((event as KeyboardEvent).shiftKey || (event as KeyboardEvent).altKey || event.metaKey || event.ctrlKey) {
+      this.isSpecialChar = true;
+      return;
+    }
+
+    let selectionStart = (event.target as HTMLInputElement).selectionStart as number;
+    let selectionEnd = (event.target as HTMLInputElement).selectionEnd as number;
+    let inputValue = (event.target as HTMLInputElement).value as string;
+    let newValueStr = null;
+
+    if (event.altKey) {
+      event.preventDefault();
+    }
+
+    switch (event.key) {
+      case 'ArrowUp':
+        event.preventDefault();
+        break;
+
+      case 'ArrowDown':
+        event.preventDefault();
+        break;
+
+      case 'ArrowLeft':
+        for (let index = selectionStart; index <= inputValue.length; index++) {
+          const previousCharIndex = index === 0 ? 0 : index - 1;
+          if (this.isNumeralChar(inputValue.charAt(previousCharIndex))) {
+            this.input.nativeElement.setSelectionRange(index, index);
+            break;
+          }
+        }
+        break;
+
+      case 'ArrowRight':
+        for (let index = selectionEnd; index >= 0; index--) {
+          if (this.isNumeralChar(inputValue.charAt(index))) {
+            this.input.nativeElement.setSelectionRange(index, index);
+            break;
+          }
+        }
+        break;
+
+      case 'Tab':
+      case 'Enter':
+        newValueStr = this.validateValue(this.parseValue(this.input.nativeElement.value));
+        this.input.nativeElement.value = this.formatValue(newValueStr);
+        this.input.nativeElement.setAttribute('aria-valuenow', newValueStr?.toString() ?? '');
+        this.updateModel(event, newValueStr);
+        break;
+
+      case 'Backspace': {
+        event.preventDefault();
+
+        if (selectionStart === selectionEnd) {
+          // if ((selectionStart == 1 && this.prefix) || (selectionStart == inputValue.length && this.suffix)) {
+          //   break;
+          // }
+
+          const deleteChar = inputValue.charAt(selectionStart - 1);
+          const { decimalCharIndex, decimalCharIndexWithoutPrefix } = this.getDecimalCharIndexes(inputValue);
+
+          if (this.isNumeralChar(deleteChar)) {
+            const decimalLength = this.getDecimalLength(inputValue);
+
+            if (this._group.test(deleteChar)) {
+              this._group.lastIndex = 0;
+              newValueStr = inputValue.slice(0, selectionStart - 2) + inputValue.slice(selectionStart - 1);
+            } else if (this._decimal.test(deleteChar)) {
+              this._decimal.lastIndex = 0;
+
+              if (decimalLength) {
+                this.input?.nativeElement.setSelectionRange(selectionStart - 1, selectionStart - 1);
+              } else {
+                newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
+              }
+            } else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
+              const insertedText = this.isDecimalMode() && (this.formatterOptions.minimumFractionDigits || 0) < <number>decimalLength ? '' : '0';
+              newValueStr = inputValue.slice(0, selectionStart - 1) + insertedText + inputValue.slice(selectionStart);
+            } else if (decimalCharIndexWithoutPrefix === 1) {
+              newValueStr = inputValue.slice(0, selectionStart - 1) + '0' + inputValue.slice(selectionStart);
+              newValueStr = (this.parseValue(newValueStr) as number) > 0 ? newValueStr : '';
+            } else {
+              newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
+            }
+          }
+
+          this.updateValue(event, newValueStr, null, 'delete-single');
+        } else {
+          newValueStr = this.deleteRange(inputValue, selectionStart, selectionEnd);
+          this.updateValue(event, newValueStr, null, 'delete-range');
+        }
+
+        break;
+      }
+
+      case 'Delete':
+        event.preventDefault();
+
+        if (selectionStart === selectionEnd) {
+          // if ((selectionStart == 0 && this.prefix) || (selectionStart == inputValue.length - 1 && this.suffix)) {
+          //   break;
+          // }
+          const deleteChar = inputValue.charAt(selectionStart);
+          const { decimalCharIndex, decimalCharIndexWithoutPrefix } = this.getDecimalCharIndexes(inputValue);
+
+          if (this.isNumeralChar(deleteChar)) {
+            const decimalLength = this.getDecimalLength(inputValue);
+
+            if (this._group.test(deleteChar)) {
+              this._group.lastIndex = 0;
+              newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 2);
+            } else if (this._decimal.test(deleteChar)) {
+              this._decimal.lastIndex = 0;
+
+              if (decimalLength) {
+                this.input?.nativeElement.setSelectionRange(selectionStart + 1, selectionStart + 1);
+              } else {
+                newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1);
+              }
+            } else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
+              const insertedText = this.isDecimalMode() && (this.formatterOptions.minimumFractionDigits || 0) < <number>decimalLength ? '' : '0';
+              newValueStr = inputValue.slice(0, selectionStart) + insertedText + inputValue.slice(selectionStart + 1);
+            } else if (decimalCharIndexWithoutPrefix === 1) {
+              newValueStr = inputValue.slice(0, selectionStart) + '0' + inputValue.slice(selectionStart + 1);
+              newValueStr = (this.parseValue(newValueStr) as number) > 0 ? newValueStr : '';
+            } else {
+              newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1);
+            }
+          }
+
+          this.updateValue(event, newValueStr as string, null, 'delete-back-single');
+        } else {
+          newValueStr = this.deleteRange(inputValue, selectionStart, selectionEnd);
+          this.updateValue(event, newValueStr, null, 'delete-range');
+        }
+        break;
+
+      case 'Home':
+        if (this.min) {
+          this.updateModel(event, this.min);
+          event.preventDefault();
+        }
+        break;
+
+      case 'End':
+        // if (this.max) {
+        //   this.updateModel(event, this.max);
+        //   event.preventDefault();
+        // }
+        break;
+
+      default:
+        break;
+    }
+
+    // this.onKeyDown.emit(event);
+  }
+
+
+  onInputKeyPress(event: KeyboardEvent) {
+    if (this.disabled) {
+      return;
+    }
+
+    let code = event.which || event.keyCode;
+    let char = String.fromCharCode(code);
+    let isDecimalSign = this.isDecimalSign(char);
+    const isMinusSign = this.isMinusSign(char);
+
+    if (code != 13) {
+      event.preventDefault();
+    }
+    if (!isDecimalSign && event.code === 'NumpadDecimal') {
+      isDecimalSign = true;
+      char = this._decimalChar;
+      code = char.charCodeAt(0);
+    }
+    const { value, selectionStart, selectionEnd } = this.input.nativeElement;
+    const newValue = this.parseValue(value + char);
+    const newValueStr = newValue != null ? newValue.toString() : '';
+    const selectedValue = value.substring(selectionStart ?? 0, selectionEnd ?? 0);
+    const selectedValueParsed = this.parseValue(selectedValue);
+    const selectedValueStr = selectedValueParsed != null ? selectedValueParsed.toString() : '';
+
+    if (selectionStart !== selectionEnd && selectedValueStr.length > 0) {
+      this.insert(event, char, { isDecimalSign, isMinusSign });
+      return;
+    }
+
+    if (this.maxLength && newValueStr.length > this.maxLength) {
+      return;
+    }
+
+    if ((48 <= code && code <= 57) || isMinusSign || isDecimalSign) {
+      this.insert(event, char, { isDecimalSign, isMinusSign });
+    }
+  }
+
+  insert(event: Event, text: string, sign = { isDecimalSign: false, isMinusSign: false }) {
+    const minusCharIndexOnText = text.search(this._minusSign);
+    this._minusSign.lastIndex = 0;
+    if (!this.allowMinusSign && minusCharIndexOnText !== -1) {
+      return;
+    }
+
+    let selectionStart = this.input?.nativeElement.selectionStart ?? 0;
+    let selectionEnd = this.input?.nativeElement.selectionEnd ?? 0;
+    let inputValue = this.input?.nativeElement.value.trim();
+    const { decimalCharIndex, minusCharIndex } = this.getCharIndexes(inputValue);
+    let newValueStr;
+
+    if (sign.isMinusSign) {
+      if (selectionStart === 0) {
+        newValueStr = inputValue;
+        if (minusCharIndex === -1 || selectionEnd !== 0) {
+          newValueStr = this.insertText(inputValue, text, 0, selectionEnd);
+        }
+
+        this.updateValue(event, newValueStr, text, 'insert');
+      }
+    } else if (sign.isDecimalSign) {
+      if (decimalCharIndex > 0 && selectionStart === decimalCharIndex) {
+        this.updateValue(event, inputValue, text, 'insert');
+      } else if (decimalCharIndex > selectionStart && decimalCharIndex < selectionEnd) {
+        newValueStr = this.insertText(inputValue, text, selectionStart, selectionEnd);
+        this.updateValue(event, newValueStr, text, 'insert');
+      } else if (decimalCharIndex === -1 && this.maxFractionDigits) {
+        newValueStr = this.insertText(inputValue, text, selectionStart, selectionEnd);
+        this.updateValue(event, newValueStr, text, 'insert');
+      }
+    } else {
+      const maxFractionDigits = this.formatterOptions.maximumFractionDigits; // this.numberFormat.resolvedOptions().maximumFractionDigits;
+      const operation = selectionStart !== selectionEnd ? 'range-insert' : 'insert';
+
+      if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
+        if (selectionStart + text.length - (decimalCharIndex + 1) <= maxFractionDigits) {
+          // const charIndex = currencyCharIndex >= selectionStart ? currencyCharIndex - 1 : suffixCharIndex >= selectionStart ? suffixCharIndex : inputValue.length;
+          const charIndex = inputValue.length;
+          newValueStr = inputValue.slice(0, selectionStart) + text + inputValue.slice(selectionStart + text.length, charIndex) + inputValue.slice(charIndex);
+          this.updateValue(event, newValueStr, text, operation);
+        }
+      } else {
+        newValueStr = this.insertText(inputValue, text, selectionStart, selectionEnd);
+        this.updateValue(event, newValueStr, text, operation);
+      }
+    }
+  }
+
+
+  insertText(value: string, text: string, start: number, end: number): string {
+    let textSplit = text === '.' ? text : text.split('.');
+
+    if (textSplit.length === 2) {
+      const decimalCharIndex = value.slice(start, end).search(this._decimal);
+      this._decimal.lastIndex = 0;
+      return decimalCharIndex > 0 ? value.slice(0, start) + this.formatValue(text) + value.slice(end) : value || this.formatValue(text);
+    } else if (end - start === value.length) {
+      return this.formatValue(text);
+    } else if (start === 0) {
+      return text + value.slice(end);
+    } else if (end === value.length) {
+      return value.slice(0, start) + text;
+    } else {
+      return value.slice(0, start) + text + value.slice(end);
+    }
+  }
+
+  deleteRange(value: string, start: number, end: number) {
+    let newValueStr;
+
+    if (end - start === value.length) newValueStr = '';
+    else if (start === 0) newValueStr = value.slice(end);
+    else if (end === value.length) newValueStr = value.slice(0, start);
+    else newValueStr = value.slice(0, start) + value.slice(end);
+
+    return newValueStr;
+  }
+
+  updateValue(event: Event, valueStr?: null | string, insertedValueStr?: null | string, operation?: null | string) {
+    let currentValue = this.input?.nativeElement.value;
+    let newValue = null;
+
+    if (valueStr != null) {
+      newValue = this.parseValue(valueStr);
+      // newValue = !newValue && !this.allowEmpty ? 0 : newValue;
+      this.updateInput(newValue, insertedValueStr, operation, valueStr);
+
+      this.handleOnInput(event, currentValue, newValue);
+    }
+  }
+
+  updateInput(value: any, insertedValueStr?: | null | string, operation?: | null | string, valueStr?: | null | string) {
+    insertedValueStr = insertedValueStr || '';
+
+    let inputValue = this.input?.nativeElement.value;
+    let newValue = this.formatValue(value);
+    let currentLength = inputValue.length;
+
+    if (newValue !== valueStr) {
+      newValue = this.concatValues(newValue, valueStr as string);
+    }
+
+    if (currentLength === 0) {
+      this.input.nativeElement.value = newValue;
+      this.input.nativeElement.setSelectionRange(0, 0);
+      const index = this.initCursor();
+      const selectionEnd = index + insertedValueStr.length;
+      this.input.nativeElement.setSelectionRange(selectionEnd, selectionEnd);
+    } else {
+      let selectionStart = this.input.nativeElement.selectionStart ?? 0;
+      let selectionEnd = this.input.nativeElement.selectionEnd ?? 0;
+
+      if (this.maxLength && newValue.length > this.maxLength) {
+        newValue = newValue.slice(0, this.maxLength);
+        selectionStart = Math.min(selectionStart, this.maxLength);
+        selectionEnd = Math.min(selectionEnd, this.maxLength);
+      }
+
+      if (this.maxLength && this.maxLength < newValue.length) {
+        return;
+      }
+
+      this.input.nativeElement.value = newValue;
+      let newLength = newValue.length;
+
+      if (operation === 'range-insert') {
+        const startValue = this.parseValue((inputValue || '').slice(0, selectionStart));
+        const startValueStr = startValue !== null ? startValue.toString() : '';
+        const startExpr = startValueStr.split('').join(`(${this.groupChar})?`);
+        const sRegex = new RegExp(startExpr, 'g');
+        sRegex.test(newValue);
+
+        const tExpr = insertedValueStr.split('').join(`(${this.groupChar})?`);
+        const tRegex = new RegExp(tExpr, 'g');
+        tRegex.test(newValue.slice(sRegex.lastIndex));
+
+        selectionEnd = sRegex.lastIndex + tRegex.lastIndex;
+        this.input.nativeElement.setSelectionRange(selectionEnd, selectionEnd);
+      } else if (newLength === currentLength) {
+        if (operation === 'insert' || operation === 'delete-back-single') this.input.nativeElement.setSelectionRange(selectionEnd + 1, selectionEnd + 1);
+        else if (operation === 'delete-single') this.input.nativeElement.setSelectionRange(selectionEnd - 1, selectionEnd - 1);
+        else if (operation === 'delete-range' || operation === 'spin') this.input.nativeElement.setSelectionRange(selectionEnd, selectionEnd);
+      } else if (operation === 'delete-back-single') {
+        let prevChar = inputValue.charAt(selectionEnd - 1);
+        let nextChar = inputValue.charAt(selectionEnd);
+        let diff = currentLength - newLength;
+        let isGroupChar = this._group.test(nextChar);
+
+        if (isGroupChar && diff === 1) {
+          selectionEnd += 1;
+        } else if (!isGroupChar && this.isNumeralChar(prevChar)) {
+          selectionEnd += -1 * diff + 1;
+        }
+
+        this._group.lastIndex = 0;
+        this.input.nativeElement.setSelectionRange(selectionEnd, selectionEnd);
+      } else if (inputValue === '-' && operation === 'insert') {
+        this.input.nativeElement.setSelectionRange(0, 0);
+        const index = this.initCursor();
+        const selectionEnd = index + insertedValueStr.length + 1;
+        this.input.nativeElement.setSelectionRange(selectionEnd, selectionEnd);
+      } else {
+        selectionEnd = selectionEnd + (newLength - currentLength);
+        this.input.nativeElement.setSelectionRange(selectionEnd, selectionEnd);
+      }
+    }
+
+    this.input.nativeElement.setAttribute('aria-valuenow', value);
+  }
+
+  initCursor() {
+    let selectionStart = this.input?.nativeElement.selectionStart ?? 0;
+    let selectionEnd = this.input?.nativeElement.selectionEnd ?? 0;
+    let inputValue = this.input?.nativeElement.value;
+    let valueLength = inputValue.length;
+    let index = null;
+
+    // remove prefix
+    let prefixLength = 0;
+    // let prefixLength = (this.prefixChar || '').length;
+    // inputValue = inputValue.replace(this._prefix, '');
+
+    // Will allow selecting whole prefix. But not a part of it.
+    // Negative values will trigger clauses after this to fix the cursor position.
+    if (selectionStart === selectionEnd || selectionStart !== 0 || selectionEnd < prefixLength) {
+      selectionStart -= prefixLength;
+    }
+
+    let char = inputValue.charAt(selectionStart);
+    if (this.isNumeralChar(char)) {
+      return selectionStart + prefixLength;
+    }
+
+    //left
+    let i = selectionStart - 1;
+    while (i >= 0) {
+      char = inputValue.charAt(i);
+      if (this.isNumeralChar(char)) {
+        index = i + prefixLength;
+        break;
+      } else {
+        i--;
+      }
+    }
+
+    if (index !== null) {
+      this.input?.nativeElement.setSelectionRange(index + 1, index + 1);
+    } else {
+      i = selectionStart;
+      while (i < valueLength) {
+        char = inputValue.charAt(i);
+        if (this.isNumeralChar(char)) {
+          index = i + prefixLength;
+          break;
+        } else {
+          i++;
+        }
+      }
+
+      if (index !== null) {
+        this.input?.nativeElement.setSelectionRange(index, index);
+      }
+    }
+
+    return index || 0;
+  }
+
+  handleOnInput(event: Event, currentValue: string, newValue: any) {
+    if (this.isValueChanged(currentValue, newValue)) {
+      (this.input as ElementRef).nativeElement.value = this.formatValue(newValue);
+      this.input?.nativeElement.setAttribute('aria-valuenow', newValue);
+      this.updateModel(event, newValue);
+      // this.onInput.emit({ originalEvent: event, value: newValue, formattedValue: currentValue });
+    }
+  }
+
+  concatValues(val1: string, val2: string) {
+    if (val1 && val2) {
+      let decimalCharIndex = val2.search(this._decimal);
+      this._decimal.lastIndex = 0;
+
+      return decimalCharIndex !== -1 ? val1.split(this._decimal)[0] + val2.slice(decimalCharIndex) : val1;
+
+    }
+    return val1;
+  }
+
+  getDecimalLength(value: string) {
+    if (value) {
+      const valueSplit = value.split(this._decimal);
+
+      if (valueSplit.length === 2) {
+        return valueSplit[1]
+          .trim()
+          .replace(/\s/g, '')
+      }
+    }
+
+    return 0;
+  }
+
+  onPaste(event: ClipboardEvent) {
+    if (!this.disabled && !this.disabled) {
+      event.preventDefault();
+      let data = (event.clipboardData || (document as any).defaultView['clipboardData']).getData('Text');
+      if (data) {
+        if (this.maxLength) {
+          data = data.toString().substring(0, this.maxLength);
+        }
+
+        let filteredData = this.parseValue(data);
+        if (filteredData != null) {
+          this.insert(event, filteredData.toString());
+        }
+      }
+    }
+  }
+
+  isValueChanged(currentValue: string, newValue: string) {
+    if (newValue === null && currentValue !== null) {
+      return true;
+    }
+
+    if (newValue != null) {
+      let parsedCurrentValue = typeof currentValue === 'string' ? this.parseValue(currentValue) : currentValue;
+      return newValue !== parsedCurrentValue;
+    }
+
+    return false;
+  }
+
+  isNumeralChar(char: string) {
+    if (char.length === 1 && (this._numeral.test(char) || this._decimal.test(char) || this._group.test(char) || this._minusSign.test(char))) {
+      this.resetRegex();
+      return true;
+    }
+
+    return false;
+  }
+
+  isDecimalMode(): boolean {
+    return true;
+  }
+
+  getDecimalCharIndexes(val: string) {
+    let decimalCharIndex = val.search(this._decimal);
+    this._decimal.lastIndex = 0;
+
+    const filteredVal = val
+      .trim()
+      .replace(/\s/g, '')
+    const decimalCharIndexWithoutPrefix = filteredVal.search(this._decimal);
+    this._decimal.lastIndex = 0;
+
+    return { decimalCharIndex, decimalCharIndexWithoutPrefix };
+  }
+
+  validateValue(value: number | string) {
+    if (value === '-' || value == null) {
+      return null;
+    }
+
+    if (this.min != null && (value as number) < this.min) {
+      return this.min;
+    }
+
+    // if (this.max != null && (value as number) > this.max) {
+    //   return this.max;
+    // }
+
+    return value;
+  }
+
+  resetRegex() {
+    this._numeral.lastIndex = 0;
+    this._decimal.lastIndex = 0;
+    this._group.lastIndex = 0;
+    this._minusSign.lastIndex = 0;
+  }
+
+  formatValue(value: any) {
+    if (value != null) {
+      if (value === '-') {
+        // Minus sign
+        return value;
+      }
+
+      // if (this.format) {
+      let formatter = new Intl.NumberFormat(this.locale, this.formatterOptions);
+      let formattedValue = formatter.format(value);
+
+      return formattedValue;
+      // }
+
+      return value.toString();
+    }
+
+    return '';
+  }
+
+
+  formattedValue() {
+    const val = !this.value && !this.required ? 0 : this.value;
+    return this.formatValue(val);
+  }
+
+  updateModel(event: Event, value: any) {
+    const isBlurUpdateOnMode = this.ngControl?.control?.updateOn === 'blur';
+
+    if (this.inputValue !== value) {
+      this.inputValue = value;
+      if (!(isBlurUpdateOnMode && this.focused)) {
+        // this.onModelChange(value);
+        this.stateChanges.next();
+      }
+    } else if (isBlurUpdateOnMode) {
+      // this.onModelChange(value);
+      this.stateChanges.next();
+    }
+    // this.onModelTouched();
+    this.onTouched();
+  }
+}