@sapphire-ion/framework 1.3.5 → 1.3.8

package/src/lib/components/inputs/input-date/input-date.component.html

@@ -1,89 +0,0 @@
-<div 
-  #inputContainer
-  class="input-container" 
-  (click)="setFocus($event)"
-  [class.required]="required()" 
-  [class.submitted]="submitted()" 
-  [class.invalid]="invalid" 
-  [class.disabled]="disabled() || loading()"
-  [class.loading]="loading()"
->
-  <div class="input-label"> 
-    <span class="truncate">
-      {{label()}} 
-    </span>
-  </div>
-  
-  <input #input
-    [ngModel]="readableValue" 
-    (ngModelChange)="SetValueFromReadable($event);"
-    [maskito]="options"
-    [disabled]="disabled() || loading()"
-    (blur)="blur.emit($event)"
-    (keydown)="onKeyDown($event)"
-  />
-  <ion-button  *ngIf="configuration().clearable && readableValue" tabindex="-1" class="absolute right-8 bottom-1" 
-                (click)="ClearValue($event)" color="medium" size="small" fill="clear" style="--border-radius: .5rem"
-  >
-    <ion-icon name="close" slot="icon-only"></ion-icon>
-  </ion-button>
-  
-  <ion-button tabindex="-1" class="absolute right-2 bottom-1" (click)="Present($event)" color="medium" size="small" fill="clear" style="--border-radius: .5rem">
-    <ion-icon [name]="presentation == DatePresentation.Time ? 'time' : 'calendar'" slot="icon-only"></ion-icon>
-  </ion-button>
-
-  <div class="loading-container" [class.loading]="loading()">
-    <ion-spinner></ion-spinner>
-  </div>
-</div>
-
-@if (interface() == DateInterfaces.Popover) {
-  <sion-popover
-    #popover 
-    [anchor]="inputContainer"
-  >
-    <ng-container *ngTemplateOutlet="datetimeTemplate;"></ng-container>
-  </sion-popover>
-}
-@else {
-  <ion-modal 
-    #modal
-    [class.time]="presentation == DatePresentation.Time" 
-    [class.date]="presentation == DatePresentation.Date" 
-    [class.datetime]="presentation == DatePresentation.DateTime"
-  >
-    <ng-template>
-      <ng-container *ngTemplateOutlet="datetimeTemplate;"></ng-container>
-    </ng-template>
-  </ion-modal>
-}
-
-
-<ng-template #datetimeTemplate>
-  <div class="flex items-center justify-center bg-[--ion-color-light] rounded-xl" tabindex="-1">
-    
-    @if ([DatePresentation.DateTime, DatePresentation.Date].includes(presentation)) {
-      <mat-calendar #calendar class="w-72 text-dark" 
-        [(selected)]="momentValue" 
-        (selectedChange)="SetValueFromMoment($event)"
-      ></mat-calendar>
-    }
-    @if ([DatePresentation.DateTime, DatePresentation.Time].includes(presentation)) {
-      <div class="flex h-full mask-y/30 items-center justify-center">
-        <ion-picker>
-          <ion-picker-column (ionChange)="OnChangeHour($event.target.value.toString())" [value]="hour">
-            @for (item of lstHours; track $index) {
-              <ion-picker-column-option [value]="item">{{item}}</ion-picker-column-option>
-            }
-          </ion-picker-column>
-          <ion-picker-column (ionChange)="OnChangeMinute($event.target.value.toString())" [value]="minute">
-            @for (item of lstMinutes; track $index) {
-              <ion-picker-column-option [value]="item">{{item}}</ion-picker-column-option>
-            }
-          </ion-picker-column>
-        </ion-picker>
-      </div>
-    }
-
-  </div>
-</ng-template>

package/src/lib/components/inputs/input-date/input-date.component.ts

@@ -1,269 +0,0 @@
-import { Component, computed, ElementRef, forwardRef, HostListener, input, InputSignal, OnInit, Signal, signal, ViewChild, WritableSignal } from '@angular/core';
-import { maskitoDateTimeOptionsGenerator } from '@maskito/kit';
-import { maskitoDateOptionsGenerator } from '@maskito/kit';
-import { maskitoTimeOptionsGenerator } from '@maskito/kit';
-import { MaskitoOptions } from '@maskito/core';
-import moment, { Moment } from 'moment';
-
-import { InputDateConfiguration } from './input-date.configuration';
-import { InputProviderFactory } from '../input-provider-factory';
-import { CustomInput } from '../custom-input';
-import { IonDatetime, IonModal, IonPopover } from '@ionic/angular';
-import { SIonPopoverComponent } from '../../popover/sion-popover/sion-popover.component';
-import { MatCalendar, MatDatepicker } from '@angular/material/datepicker';
-
-
-@Component({
-  selector: 'input-date, input-date-time, input-time',
-  templateUrl: './input-date.component.html',
-  styleUrls: ['./input-date.component.scss', '../inputs.scss'],
-  providers: [
-    ...InputProviderFactory.GetProviders(InputDateComponent),
-    { provide: CustomInput, useExisting: forwardRef(() => InputDateComponent) },
-  ],
-})
-export class InputDateComponent extends CustomInput<string> {
-  static FormatISO = 'YYYY-MM-DDTHH:mm:ss';
-  
-  configuration: InputSignal<InputDateConfiguration> = input<InputDateConfiguration>(new InputDateConfiguration());
-  @ViewChild('input') input: ElementRef<HTMLInputElement>;
-  @ViewChild('inputContainer') inputContainer: ElementRef<HTMLDivElement>;
-  override setFocus(event: MouseEvent | null): void {
-    if(this.input && (event == null || event.target == this.inputContainer.nativeElement)) { this.input.nativeElement.focus(); }      
-  }
-  
-  options: MaskitoOptions;
-  // Formato do input html (string)
-  momentFormat: 'DD/MM/YYYY HH:mm' | 'DD/MM/YYYY' | 'HH:mm' = 'DD/MM/YYYY HH:mm';
-
-
-  //Handle input interface
-  windowSize: WritableSignal<number> = signal<number>(window.innerWidth);
-  @HostListener('window:resize', ['$event'])
-  onResize(event: any) { this.windowSize.set(window.innerWidth); }
-  interface: Signal<DateInterfaces> = computed<DateInterfaces>(() => {
-    return this.windowSize() > window.innerHeight ? DateInterfaces.Popover : DateInterfaces.Modal;
-  });
-  DateInterfaces = DateInterfaces;
-
-
-  constructor(
-    override elementRef: ElementRef
-  ) { 
-    super(); 
-    const presentation = (this.elementRef.nativeElement.tagName.toLowerCase() as string).replace('input-', '');
-    this.presentation = {
-      'date-time': DatePresentation.DateTime,
-      'date': DatePresentation.Date,
-      'time': DatePresentation.Time,
-    }[presentation] ?? DatePresentation.DateTime;
-
-    if(this.presentation == DatePresentation.DateTime){ 
-      this.momentFormat = 'DD/MM/YYYY HH:mm';
-      this.options = maskitoDateTimeOptionsGenerator({
-        dateMode: 'dd/mm/yyyy',
-        timeMode: 'HH:MM',
-        dateSeparator: '/',
-        dateTimeSeparator: ' ',
-        timeStep: 1,
-      });
-    } else
-    if(this.presentation == DatePresentation.Date) {
-      this.momentFormat = 'DD/MM/YYYY';
-      this.options = maskitoDateOptionsGenerator({ mode: 'dd/mm/yyyy', separator: '/'});
-    } else
-    if(this.presentation == DatePresentation.Time) {
-      this.momentFormat = 'HH:mm'; 
-      this.options = maskitoTimeOptionsGenerator({
-        mode: 'HH:MM',
-        step: 1,
-      });
-    }
-  }
-  
-  @HostListener('keydown', ['$event'])
-  onKeyDown(event: KeyboardEvent) {
-    if (this.presentation === DatePresentation.Time && event.target === this.input?.nativeElement) {
-      event.preventDefault();
-    }
-  }
-  
-  ClearValue(event?: MouseEvent) {
-    if (event) {
-      event.stopPropagation(); // impede de abrir o calendário ao clicar no clear
-    }
-    this.value.set(null);
-    this.momentValue = undefined;
-    this.readableValue = '';
-    this.hour = '00';
-    this.minute = '00';
-    this.propagateChange(null);
-  }
-
-  public presentation: DatePresentation = DatePresentation.DateTime;
-  
-  readableValue: string = '';
-  SetValueFromReadable(value: string): void {
-    const m = moment(value, this.momentFormat, true).format(InputDateComponent.FormatISO);  
-    this.SetValue(m);
-  }
-  SetValueFromMoment(value: moment.Moment | null): void {
-    if (!value) { return; }
-    if (this.presentation === DatePresentation.Time) {
-      const formatted = value.format('HH:mm');
-      this.value.set(formatted);
-      this.readableValue = formatted;
-      this.propagateChange(formatted);
-      return;
-    }
-    if (this.configuration().setHourMoment && this.presentation == DatePresentation.DateTime) {
-      const now = moment();
-
-      // Se ainda não existe momentValue OU hora/minuto zerados
-      const aplicarHoraAtual =
-        !this.momentValue ||
-        (this.momentValue.hour() == 0 && this.momentValue.minute() == 0);
-
-      if (aplicarHoraAtual) {
-        value = value.clone()
-          .hour(now.hour())
-          .minute(now.minute())
-          .second(0);
-      } else {
-        // mantém hora já escolhida anteriormente
-        value = value.clone()
-          .hour(this.hour ? Number(this.hour) : value.hour())
-          .minute(this.minute ? Number(this.minute) : value.minute());
-      }
-    }
-    this.SetValue(value.format(InputDateComponent.FormatISO));
-  }
-
-  @ViewChild('calendar') calendar: MatCalendar<moment.Moment>;
-  /**
-   * @param obj String in ISO format (YYYY-MM-DDThh:mm:ss)
-   */
-  override SetValue(obj: string): void {
-    this.value.set(obj);
-
-    if(this.value()){
-      this.momentValue   = moment(this.value(), InputDateComponent.FormatISO, true);
-      this.readableValue = this.momentValue.format(this.momentFormat.toString());
-
-      if(this.calendar){
-        this.calendar.activeDate = this.momentValue; // set the active date to the selected date
-        this.calendar.updateTodaysDate(); // update calendar state
-      }
-      if(this.momentValue){
-        this.hour   = this.momentValue.get('hour').toString().padStart(2,'0');
-        this.minute = this.momentValue.get('minute').toString().padStart(2,'0');
-      }
-    }
-    
-    this.runValidation();
-    if(this.momentValue.isValid()){
-      this.propagateChange(obj);
-    } else{
-      this.propagateChange(null);
-    }
-  }
-
-  momentValue?: moment.Moment;
-
-  @ViewChild(IonDatetime) datetime: IonDatetime;
-  
-  override writeValue(obj?: string): void | Promise<void> {
-    this.value.set(obj);
-  
-    if (this.value()) {
-      if (this.presentation === DatePresentation.Time) {
-        this.readableValue = moment(this.value(), 'HH:mm', true).format('HH:mm');
-      
-        // cria momentValue se quiser manipular hora/minuto depois
-        this.momentValue = moment(this.readableValue, 'HH:mm', true);
-      
-        this.hour   = this.momentValue.get('hour').toString().padStart(2,'0');
-        this.minute = this.momentValue.get('minute').toString().padStart(2,'0');
-      } else {
-        this.momentValue   = moment(this.value(), InputDateComponent.FormatISO, true);
-        this.readableValue = this.momentValue.format(this.momentFormat.toString());
-        
-        if (this.calendar) {
-          this.calendar.activeDate = this.momentValue;
-          this.calendar.updateTodaysDate();
-        }
-        if (this.momentValue) {
-          this.hour   = this.momentValue.get('hour').toString().padStart(2,'0');
-          this.minute = this.momentValue.get('minute').toString().padStart(2,'0');
-        }
-      }
-    }
-    this.runValidation();
-  }
-
-
-  @ViewChild(SIonPopoverComponent) popover: SIonPopoverComponent;
-  @ViewChild(IonModal) modal: IonModal;
-  async Present(event: MouseEvent) {
-    if(this.interface() == DateInterfaces.Popover){
-      return this.popover.present(event);
-    } else {
-      return this.modal.present();
-    }
-  }
-
-  async Dismiss() {
-    if(this.popover){
-      this.popover.dismiss();
-    }
-    if(this.modal){
-      this.modal.dismiss();
-    }
-  }
-
-  DatePresentation = DatePresentation;
-
-  lstHours = lstHours;
-  lstMinutes = lstMinutes;
-
-  hour  : string = '00';
-  minute: string = '00';
-
-  OnChangeHour(event: string) {
-    if (event == this.hour) { return; }
-    this.hour = event;
-  
-    if (!this.momentValue) {
-      this.momentValue = moment().startOf('day'); // cria um moment base
-    }
-  
-    this.momentValue.set('hour', Number(event));
-    this.SetValueFromMoment(this.momentValue);
-  }
-  
-  OnChangeMinute(event: string) {
-    if (event == this.minute) { return; }
-    this.minute = event;
-  
-    if (!this.momentValue) {
-      this.momentValue = moment().startOf('day');
-    }
-  
-    this.momentValue.set('minute', Number(event));
-    this.SetValueFromMoment(this.momentValue);
-  }
-}
-
-
-enum DatePresentation {
-  DateTime = 1,
-  Date     = 2,
-  Time     = 3
-}
-enum DateInterfaces{
-  Popover = 1,
-  Modal   = 2,
-}
-
-const lstHours = Array.from(Array(24).keys()).map(i => i.toString().padStart(2,'0'));
-const lstMinutes = Array.from(Array(60).keys()).map(i => i.toString().padStart(2,'0'));

package/src/lib/components/inputs/input-date/input-date.configuration.ts

@@ -1,8 +0,0 @@
-export class InputDateConfiguration{
-  constructor(
-    /** Habilita o botão de limpar os dados  */
-    public clearable: boolean = false,
-    /** Caso o Input for DateTime, pode inserir o parametro para setar hora do momento atual */
-    public setHourMoment: boolean = false
-  ){}
-}

package/src/lib/components/inputs/input-decimal/input-decimal.component.html

@@ -1,32 +0,0 @@
-<div 
-  #inputContainer
-  class="input-container" 
-  (click)="setFocus($event)"
-  [class.required]="required()" 
-  [class.submitted]="submitted()" 
-  [class.invalid]="invalid" 
-  [class.disabled]="disabled() || loading()"
-  [class.loading]="loading()"
->
-  <div class="input-label"> 
-    <span class="truncate">
-      {{label()}} 
-    </span>
-  </div>
-
-  <div class="decimal-input-container text-dark">
-    <span *ngIf="configuration().prefix" slot="start">{{configuration().prefix}}</span>
-    <input #input
-      inputmode="numeric"
-      [attr.placeholder]="!valueString ? placeholder() : null"
-      [value]="valueString" 
-      (keydown)="onKeyDown($event)"
-      [disabled]="disabled() || loading()"
-      (blur)="blur.emit($event)"
-    />
-    <span *ngIf="configuration().sufix"  slot="end"  >{{configuration().sufix}}</span>
-  </div>
-  <div class="loading-container" [class.loading]="loading()">
-    <ion-spinner></ion-spinner>
-  </div>
-</div>

package/src/lib/components/inputs/input-decimal/input-decimal.component.ts

@@ -1,283 +0,0 @@
-import { Component, computed, ElementRef, forwardRef, HostListener, model, ModelSignal, Signal, ViewChild } from '@angular/core';
-import { formatNumber } from '@angular/common';
-import { InputCurrencyConfiguration, InputDecimalConfiguration, InputNumberConfiguration, InputPercentageConfiguration } from './input-decimal.configuration';
-import { InputProviderFactory } from '../input-provider-factory';
-import { CustomInput } from '../custom-input';
-import { Timeout } from '../../../services/utils.service';
-
-@Component({
-  selector: 'input-decimal, input-number, input-currency, input-percentage',
-  templateUrl: './input-decimal.component.html',
-  styleUrls: ['./input-decimal.component.scss', '../inputs.scss'],
-  providers: [
-    ...InputProviderFactory.GetProviders(InputDecimalComponent),
-    { provide: CustomInput, useExisting: forwardRef(() => InputDecimalComponent) },
-  ],
-})
-export class InputDecimalComponent extends CustomInput<number | null> {
-
-  configuration: ModelSignal<InputDecimalConfiguration> = model<InputDecimalConfiguration>();
-  digitsInfo: Signal<string> = computed(() => `1.${this.configuration().precision}-${this.configuration().precision}`);
-  divider: Signal<number> = computed(() => Math.pow(10, this.configuration().precision));
-
-  placeholder: Signal<string> = computed(() => {
-    const selector: string = this.elementRef.nativeElement.tagName.toLowerCase().split('-').at(-1);
-    if(selector == "number"){
-      return `0`;
-    }else{
-      const zeros = '0'.repeat(this.configuration().precision);
-      return `0,${zeros}`;
-    }
-  });
-
-  @ViewChild('input') input: ElementRef<HTMLInputElement>;
-  @ViewChild('inputContainer') inputContainer: ElementRef<HTMLDivElement>;
-  override setFocus(event: MouseEvent | null): void {
-    if(this.input && event.target == this.inputContainer.nativeElement) { 
-      this.input.nativeElement.focus(); 
-      this.input.nativeElement.setSelectionRange(this.valueString.length, this.valueString.length); 
-    }      
-  }
-  constructor(
-    override elementRef: ElementRef
-  ) { 
-    super(); 
-    this.value.set(null);
-    this.valueString = '';
-    const selector: string = this.elementRef.nativeElement.tagName.toLowerCase().split('-').at(-1);
-    if(selector == "number"     && !this.configuration()){ this.configuration.set(new InputNumberConfiguration());     } else
-    if(selector == "decimal"    && !this.configuration()){ this.configuration.set(new InputDecimalConfiguration());    } else
-    if(selector == "currency"   && !this.configuration()){ this.configuration.set(new InputCurrencyConfiguration());   } else
-    if(selector == "percentage" && !this.configuration()){ this.configuration.set(new InputPercentageConfiguration()); }
-    this.SetValueString(); 
-  }
-  
-  override writeValue(obj: number | null): void {
-    this.value.set(obj);
-
-    if (!obj) {
-      this.valueString = '';
-    } else {
-      this.SetValueString();
-    }
-
-    this.runValidation();
-  }
-  override SetValue(obj: number | null): void {
-    this.value.set(obj);
-
-    if (!obj) {
-      this.valueString = '';
-    } else {
-      this.SetValueString();
-    }
-
-    this.runValidation();
-    this.propagateChange(obj);
-  }
-  SetValueString(): void {
-    this.valueString = formatNumber(this.value(), "pt-BR", this.digitsInfo());
-  }
-  
-  valueString: string;
-
-  @HostListener('paste', ['$event'])
-  onPaste(event: ClipboardEvent): void {
-    event.preventDefault();
-    
-    let clipboardData = event.clipboardData || window['clipboardData'];
-    let pastedText    = clipboardData.getData('text');
-
-    const s = pastedText.replaceAll('.', '').replaceAll(',', '.');
-    const n = Number(s);
-
-    if(Number(s) && isFinite(n)){ 
-      this.SetValue(n);
-    }
-    event.preventDefault();
-  }
-
-  async onKeyDown(event: KeyboardEvent): Promise<void>{
-    const value: string = this.input.nativeElement.value;
-
-    const selectionStart: number = this.input.nativeElement.selectionStart;
-    const selectionEnd  : number = this.input.nativeElement.selectionEnd;
-
-    const atLeft  = value.slice(0, selectionStart); 
-    const atRight = value.slice(selectionEnd, value.length); 
-    if(["-"].includes(event.key)){ 
-      return await this.HandleNegative(event, selectionStart, selectionEnd, value, atLeft, atRight);
-    }else
-    if(lstNumbers.includes(event.key)){ 
-      return await this.HandleNumber(event, selectionStart, selectionEnd, value, atLeft, atRight); 
-    }else
-    if(lstEspecialCases.includes(event.key)){ 
-      return await this.HandleEspecial(event, selectionStart, selectionEnd, value, atLeft, atRight); 
-    }else
-    if(["A", "a"].includes(event.key) && event.ctrlKey){ 
-      return; 
-    }else
-    if(["C", "c"].includes(event.key) && event.ctrlKey){ 
-      return; 
-    }else
-    if(["V", "v"].includes(event.key) && event.ctrlKey){ 
-      return; 
-    }else
-    if(lstIgnoreNotPrevent.includes(event.key)){ 
-      return; 
-    }else{
-      event.preventDefault();
-    }
-  }
-
-  async HandleNegative(event: KeyboardEvent, selectionStart: number, selectionEnd: number, value: string, atLeft: string, atRight: string): Promise<void>{
-    event.preventDefault();
-
-    let focusEnd = (selectionStart == 0 && selectionEnd == this.valueString.length);
-    /** [ Remove decimalSeparator & thousandSeparator ] */
-    let f;
-    if(!atLeft.includes('-')){
-      f = event.key + atLeft + atRight;
-    }else{
-      f = (atLeft + atRight).replace('-', '')
-    }
-
-    if(f == "-"){ 
-      if(value.includes('-')){
-        f = value.replace('-', '');
-      }
-      else{
-        f = `-${value}`;
-      }
-    }
-
-    const CurrentValue: number = this.SanitizeValue(f);
-    if(CurrentValue == this.value()){ return; }
-    
-    //[ Handle Set Cursor Position]
-    this.SetValue(CurrentValue);
-    const newPos = selectionStart + 1 + this.valueString.split('.').length - value.split('.').length;
-    
-    //Horrivel, mas nao tem uma alternativa boa, https://stackoverflow.com/questions/511088/use-javascript-to-place-cursor-at-end-of-text-in-text-input-element
-    await Timeout(0);
-    this.input.nativeElement.setSelectionRange(newPos, newPos); 
-    if(focusEnd){
-      this.input.nativeElement.setSelectionRange(this.valueString.length, this.valueString.length); 
-    }
-    return;
-  }
-
-  async HandleNumber(event: KeyboardEvent, selectionStart: number, selectionEnd: number, value: string, atLeft: string, atRight: string): Promise<void> {
-    event.preventDefault();
-    
-    let focusEnd = (selectionStart == 0 && selectionEnd == this.valueString.length);
-    /** [ Remove decimalSeparator & thousandSeparator ] */
-    const f = atLeft + event.key + atRight;
-    const CurrentValue: number = this.SanitizeValue(f);
-    if(CurrentValue == this.value()){ return; }
-    if(CurrentValue > decimalMaxValue){ return; }
-    
-    //[ Handle Set Cursor Position]
-    this.SetValue(CurrentValue);
-    const newPosition = selectionStart + 1 + this.valueString.split('.').length - value.split('.').length;
-    
-    //Horrivel, mas nao sem uma alternativa boa, https://stackoverflow.com/questions/511088/use-javascript-to-place-cursor-at-end-of-text-in-text-input-element
-    await Timeout(0);
-    this.input.nativeElement.setSelectionRange(newPosition, newPosition); 
-    if(focusEnd){
-      this.input.nativeElement.setSelectionRange(this.valueString.length, this.valueString.length); 
-    }
-    return;
-  }
-
-  SanitizeValue(f: string): number{
-    var CurrentValue: number = Number(Sanitize(f)) / this.divider();
-    if(CurrentValue >= decimalMaxValue){ 
-      return this.value(); 
-    }
-    return CurrentValue;
-  }
-
-  async HandleEspecial(event: KeyboardEvent, selectionStart: number, selectionEnd: number, value: string, atLeft: string, atRight: string): Promise<void> {
-    event.preventDefault();
-    if(selectionStart == selectionEnd){
-      if(event.key == "Backspace"){
-        if(selectionStart ==  selectionEnd && selectionStart == 0){ 
-          return; 
-        }
-
-        const previousChar: string = atLeft.at(-1);
-        const isNumber = lstNumbers.includes(previousChar);
-        const f = atLeft.slice(0, atLeft.length - (isNumber ? 1 : 2)) + atRight;
-        const CurrentValue = this.SanitizeValue(f);
-        if (f === '' || Sanitize(f) === '') {
-          this.SetValue(null);
-          await Timeout(0);
-          this.input.nativeElement.setSelectionRange(0, 0);
-          return;
-        }
-        
-        //[ Handle Set Cursor Position]
-        this.SetValue(CurrentValue);
-        await Timeout(0);
-        let pos = isNumber ? selectionStart - 1 : selectionStart - 2;
-
-        if (selectionEnd == this.valueString.length) {
-          pos++;
-        }
-        this.input.nativeElement.setSelectionRange(pos, pos); 
-        return;
-      }else
-      if(event.key == "Delete"){
-        const nextChar: string =  atRight[0];
-        const isNumber = lstNumbers.includes(nextChar);
-        const f = atLeft + atRight.slice(isNumber ? 1 : 2);
-        const CurrentValue = this.SanitizeValue(f);
-        if (f === '' || Sanitize(f) === '') {
-          this.SetValue(null);
-          await Timeout(0);
-          this.input.nativeElement.setSelectionRange(0, 0);
-          return;
-        }
-        //[ Handle Set Cursor Position]
-        this.SetValue(CurrentValue);
-        var pos: number = selectionStart;
-        if(pos <= -1){ pos = 0; }
-        if(CurrentValue < 1){
-          pos++;
-        }
-        if(!isNumber){
-          pos++;
-        }
-
-        await Timeout(0);
-        this.input.nativeElement.setSelectionRange(pos, pos);
-        return;
-      }
-    }else{
-      const f = atLeft + atRight;
-      const CurrentValue = this.SanitizeValue(f);
-      this.SetValue(CurrentValue);
-      
-      await Timeout(0);
-      this.input.nativeElement.setSelectionRange(this.valueString.length, this.valueString.length); 
-
-      return;
-    }
-  }
-}
-
-
-const decimalMaxValue = 9_000_000_000_000.00
-
-const decimalSeparator : string = ",";
-const thousandSeparator: string = ".";
-
-const Sanitize: Function = ((v: string): string => { 
-  return v.replaceAll(thousandSeparator, '')
-          .replace   (decimalSeparator , '') 
-        });
-
-const lstNumbers          = [ "0","1","2","3","4","5","6","7","8","9" ];
-const lstIgnoreNotPrevent = [ "Tab", "CapsLock", "Shift", "Control", "Alt", "ArrowRight", "ArrowUp", "ArrowDown", "ArrowLeft"];
-const lstEspecialCases    = [ "Backspace", "Delete" ];