@sapphire-ion/framework 0.30.27 → 0.30.28

package/{lib/components/inputs/input-configuration.d.ts → src/lib/components/inputs/input-configuration.ts}

@@ -1,8 +1,18 @@
-import { InputCurrencyConfiguration, InputDecimalConfiguration, InputNumberConfiguration } from "./input-decimal/input-decimal.configuration";
-import { InputCpfCnpjConfiguration } from "./input-cpf-cnpj/input-cpf-cnpj.configuration";
-import { InputSelectConfiguration } from "./input-select/input.select.configuration";
-import { InputStringConfiguration } from "./input-string/input-string.configuration";
-import { InputBoolConfiguration } from "./input-bool/input-bool.configuration";
-import { InputDateConfiguration } from "./input-date/input-date.configuration";
-import { InputFileConfiguration } from "./input-file/input-file.configuration";
-export type InputConfiguration = InputFileConfiguration | InputSelectConfiguration | InputBoolConfiguration | InputDateConfiguration | InputDecimalConfiguration | InputNumberConfiguration | InputCurrencyConfiguration | InputCpfCnpjConfiguration | InputStringConfiguration | any;
+import { InputCurrencyConfiguration, InputDecimalConfiguration, InputNumberConfiguration } from "./input-decimal/input-decimal.configuration";
+import { InputCpfCnpjConfiguration } from "./input-cpf-cnpj/input-cpf-cnpj.configuration";
+import { InputSelectConfiguration } from "./input-select/input.select.configuration";
+import { InputStringConfiguration } from "./input-string/input-string.configuration";
+import { InputBoolConfiguration } from "./input-bool/input-bool.configuration";
+import { InputDateConfiguration } from "./input-date/input-date.configuration";
+import { InputFileConfiguration } from "./input-file/input-file.configuration";
+
+export type InputConfiguration = 
+  InputFileConfiguration     |
+  InputSelectConfiguration   |
+  InputBoolConfiguration     |
+  InputDateConfiguration     |
+  InputDecimalConfiguration  |
+  InputNumberConfiguration   |
+  InputCurrencyConfiguration |
+  InputCpfCnpjConfiguration  |
+  InputStringConfiguration   | any;

package/src/lib/components/inputs/input-cpf-cnpj/input-cpf-cnpj.component.html

@@ -0,0 +1,26 @@
+<div class="flex relative overflow-hidden">
+  <ion-card class="focus-within:on-focus ion-card-input" [disabled]="loading || disabled"
+    [ngClass]="{
+      'invalid'  : invalid,
+      'submitted': submitted,
+      'disabled' : disabled,
+    }"
+  >
+    <ion-card-content>
+      <div class="flex">
+        <ion-item class="w-full" [ngClass]="{'submitted': submitted, 'invalid': invalid, 'required': required}" lines="none">
+          <ion-input 
+            [(ngModel)]="model"
+            labelPlacement="stacked"
+
+            [maskito]="mask"
+            [maskitoElement]="maskPredicate"
+          >
+            <ion-text id="label" [ngClass]="{'required': required}" slot="label"> {{label}} </ion-text>
+          </ion-input>
+        </ion-item>
+      </div>
+    </ion-card-content>
+  </ion-card>
+  <input-loading [loading]="loading"></input-loading>
+</div>

package/src/lib/components/inputs/input-cpf-cnpj/input-cpf-cnpj.component.ts

@@ -0,0 +1,78 @@
+import { Component, ElementRef, Host, Input, OnInit, Optional, SkipSelf } from '@angular/core';
+import { ControlContainer } from '@angular/forms';
+
+import { MaskitoOptions, MaskitoElementPredicate, maskitoTransform } from '@maskito/core';
+import { MaskitoMaskExpression } from '@maskito/core/src/lib/types';
+
+import { InputCpfCnpjConfiguration } from './input-cpf-cnpj.configuration';
+import { InputProviderFactory } from '../input-provider-factory';
+import { CustomInput } from '../custom-input';
+
+@Component({
+  selector: 'input-cpf-cnpj, input-cpf, input-cnpj',
+  templateUrl: './input-cpf-cnpj.component.html',
+  styleUrls: ['./input-cpf-cnpj.component.scss', '../inputs.scss'],
+  providers: InputProviderFactory.GetProvider(InputCpfCnpjComponent)
+})
+export class InputCpfCnpjComponent extends CustomInput<string> implements OnInit {
+
+  @Input() configuration: InputCpfCnpjConfiguration = new InputCpfCnpjConfiguration('CPF/CNPJ')
+
+  constructor(
+    @Optional() @Host() @SkipSelf()
+    override controlContainer: ControlContainer,
+    override elementRef: ElementRef
+  ) { super(); }
+
+  override async ngOnInit() {
+    super.ngOnInit();
+  
+    if(this.elementRef.nativeElement.tagName.toLowerCase() == 'input-cpf-cnpj'){
+      this.configuration = new InputCpfCnpjConfiguration();
+    }else{
+      const selector: string = this.elementRef.nativeElement.tagName.toLowerCase().split('-')[1];
+      if(selector == 'cpf' ){ this.configuration = new InputCpfCnpjConfiguration('CPF')  } else
+      if(selector == 'cnpj'){ this.configuration = new InputCpfCnpjConfiguration('CNPJ') } 
+    }
+  }
+
+  override writeValue(value: string){ this.setModel(value) }
+  override get model(): string      { return this._model;  }
+  override set model(value: string) { this.setModel(value); this.propagateChange(this._model.replaceAll('.', '').replaceAll('-', '').replaceAll('/', '')); }
+
+  setModel(value){
+    if(value == null){ 
+      this._model = '' 
+    } else { 
+      this._model = maskitoTransform(value, this.mask);
+    }
+  }
+
+  readonly cpfMask : MaskitoMaskExpression = [ /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '-', /\d/, /\d/  ];
+  readonly cnpjMask: MaskitoMaskExpression = [ /\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/];
+  
+  readonly mask: MaskitoOptions = {
+    mask: (elementState) => {
+      if(this.configuration.type == 'CPF/CNPJ'){
+        if(!elementState.value){ 
+          return this.cpfMask;
+        }else{
+          if(elementState.value.includes('.')){
+            if(elementState.value.length <= 14) { 
+              return this.cpfMask; 
+            }
+            return this.cnpjMask;
+          }else{
+            if(elementState.value.length <= 11) { 
+              return this.cpfMask; 
+            }
+            return this.cnpjMask;
+          }
+        }
+      }
+      if(this.configuration.type == 'CNPJ'){ return this.cnpjMask; }
+      if(this.configuration.type == 'CPF' ){ return this.cpfMask;  }
+    },
+  };
+  readonly maskPredicate: MaskitoElementPredicate = async (el) => (el as HTMLIonInputElement).getInputElement();
+}

package/src/lib/components/inputs/input-cpf-cnpj/input-cpf-cnpj.configuration.ts

@@ -0,0 +1,4 @@
+export type CPFCnpj = 'CPF' | 'CNPJ' | 'CPF/CNPJ'
+export class InputCpfCnpjConfiguration {
+  constructor(public type: CPFCnpj = 'CPF/CNPJ'){}
+}

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

@@ -0,0 +1,40 @@
+<div class="flex relative overflow-hidden">
+  <ion-card class="focus-within:on-focus ion-card-input" [disabled]="loading || disabled"
+    [ngClass]="{
+      'invalid'  : invalid,
+      'submitted': submitted,
+      'disabled' : disabled,
+      '!border-r-0 !rounded-r-none': configuration.clearable
+    }"
+  >
+    <ion-card-content>
+      <ion-item lines="none" class="w-full default-transition">
+        <ion-input (click)="Open()" [readonly]="true" labelPlacement="stacked" class="!opacity-100" [(ngModel)]="_val">
+          <ion-text id="label" [ngClass]="{'required': required}" slot="label"> {{label}}</ion-text>
+        </ion-input>
+      </ion-item>
+    </ion-card-content>
+  </ion-card>
+  <div class="w-12 shrink-0" [hidden]="!configuration.clearable"> 
+    <ion-button (click)="Clear()"[disabled]="loading || disabled" class="m-0 h-full w-full rounded-r-2xl on-hover" style="--border-width: 1px 1px 2px 1px;" size="small" color="medium" fill="outline"> 
+      <ion-icon slot="icon-only" name="backspace"></ion-icon> 
+    </ion-button>
+  </div>
+  <input-loading [loading]="loading"></input-loading>
+</div>
+
+<ion-modal [id]="id_modal" [keepContentsMounted]="true" class="bg-transparent">
+  <ng-template>
+    <ion-datetime [presentation]="presentation" #datetime id="{{id_modal}}-datetime" locale="pt-BR" [(ngModel)]="dateModel" (ngModelChange)="DateTimeChange()">
+      <ion-buttons slot="buttons">
+        <ion-button color="primary" fill="clear" (click)="datetime.cancel(); modal.dismiss()">
+          <ion-icon slot="icon-only" name="close-circle"></ion-icon>
+        </ion-button>
+        <ion-button color="primary" fill="clear" (click)="datetime.confirm(); modal.dismiss()">
+          <ion-icon slot="icon-only" name="checkmark-circle"></ion-icon>
+        </ion-button>
+      </ion-buttons>
+    </ion-datetime>
+  </ng-template>
+</ion-modal>
+<ion-datetime-button class="hidden" datetime="{{id_modal}}-datetime"></ion-datetime-button>

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

@@ -0,0 +1,98 @@
+import { Component, ElementRef, Host, Input, OnInit, Optional, SkipSelf } from '@angular/core';
+import { ControlContainer } from '@angular/forms';
+import { IonModal } from '@ionic/angular';
+import moment from 'moment';
+
+import { InputDateConfiguration } from './input-date.configuration';
+import { InputProviderFactory } from '../input-provider-factory';
+import { CustomInput } from '../custom-input';
+import { Utils } from '../../../services/utils.service';
+
+@Component({
+  selector: 'input-date, input-date-time, input-time',
+  templateUrl: './input-date.component.html',
+  styleUrls: ['./input-date.component.scss', '../inputs.scss'],
+  providers: InputProviderFactory.GetProvider(InputDateComponent)
+})
+export class InputDateComponent extends CustomInput<string> implements OnInit {
+
+  @Input() configuration: InputDateConfiguration = new InputDateConfiguration();
+
+  constructor(
+    @Optional() @Host() @SkipSelf()
+    override controlContainer : ControlContainer,
+    override elementRef       : ElementRef,
+  ) { super(); this.HandleSelector(); }
+
+  public presentation: "date-time" | "date" | "time" | string = "date-time"
+  private transform: Function = ((v) => { console.warn("[ Component isn't ready ]"); })
+
+  HandleSelector(){
+    const selector: string = (this.elementRef.nativeElement.tagName.toLowerCase() as string).replace('input-', '');
+    this.presentation = selector;
+    
+    if(selector == "date-time"){ this.transform = Utils.DateISOToDDMMYYYYHHMM }
+    if(selector == "date")     { this.transform = Utils.DateISOToDDMMYYYY }
+    if(selector == "time")     { this.transform = TimeTransform }
+  }
+
+  id_modal: string = "";
+  override async ngOnInit() {
+    super.ngOnInit();
+    this.id_modal = `${this.formControlName}${this.id}${Utils.GenerateGUID()}${this.elementRef.nativeElement.tagName.toLowerCase()}`
+  }
+
+  dateModel: string | null = new Date().toISOString();
+  override writeValue(value: string | null){
+    if (value !== undefined && value != null) {
+      if(['date-time', 'date'].includes(this.presentation)){
+        this.dateModel = moment(value).toISOString();
+        this.setModel(value);
+      }else{
+        this.dateModel = this.transform(value);
+        this.setModel(this.transform(value));
+      }
+    }else{
+      this.dateModel = null;
+      this.setModel(null)
+    }
+  }
+  override get model(): string      {  if(this._model != null){ return this.transform(this._model); } else return null; }
+  override set model(value: string) { this._model = value; this.propagateChange(this._model); }
+  setModel(value: string){
+    this._model = value; 
+  }
+  
+  get _val()  { return this.model; }
+  set _val(v) { }
+
+  get modal(){ return document.getElementById(this.id_modal) as any as IonModal}
+  Open(){ if(!this.disabled){ this.modal.present(); } }
+
+  Clear(){ 
+    this.dateModel = null;
+    this.DateTimeChange();
+  }
+  DateTimeChange(): void{
+    if(this.dateModel){
+      if(this.presentation == 'time') { 
+        if(this.dateModel.includes('T')){
+          this.dateModel = this.dateModel.split('T')[1];
+        }
+        this.model = this.dateModel; 
+      } else
+      if(this.presentation == 'date') { this.model = this.dateModel.split('T')[0] + "T00:00:00" } else { this.model = this.dateModel }
+    }else{
+      this.model = this.dateModel
+    }
+  }
+}
+
+const TimeTransform: Function = ((v: string): string => { 
+  if(!v){ return null; }
+  if(v.split(':').length == 2){ 
+    return v; 
+  }else{ 
+    return v.split(':')[0] + ":" + v.split(':')[1]
+  }   
+})

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

@@ -0,0 +1,6 @@
+export class InputDateConfiguration{
+  constructor(
+    /** Habilita o botão de limpar os dados  */
+    public clearable: boolean = false
+  ){}
+}

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

@@ -0,0 +1,24 @@
+<div class="flex relative overflow-hidden">
+  <ion-card class="focus-within:on-focus ion-card-input" [disabled]="loading || disabled"
+      [ngClass]="{
+        'invalid'  : invalid,
+        'submitted': submitted,
+        'disabled': disabled,
+      }"
+    >
+    <ion-card-content>
+      <div class="relative flex">
+        <ion-item class="w-full shrink-0" [ngClass]="{'required' : required}" lines="none">
+          <ion-input
+            class="default-transition" [value]="model" labelPlacement="stacked"
+          >
+            <ion-text [ngClass]="{'required': required}" slot="label"> {{label}} </ion-text>
+            <span *ngIf="configuration.prefix" slot="start">{{configuration.prefix}}</span>
+            <span *ngIf="configuration.sufix"  slot="end"  >{{configuration.sufix}}</span>
+          </ion-input>
+        </ion-item>
+      </div>
+    </ion-card-content>
+  </ion-card>
+  <input-loading [loading]="loading"></input-loading>
+</div>

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

@@ -0,0 +1,296 @@
+import { Component, ElementRef, Host, HostListener, Input, OnInit, Optional, SkipSelf } from '@angular/core';
+import { ControlContainer } from '@angular/forms';
+import { formatNumber } from '@angular/common';
+
+import { InputCurrencyConfiguration, InputDecimalConfiguration, InputNumberConfiguration } from './input-decimal.configuration';
+import { InputProviderFactory } from '../input-provider-factory';
+import { Timeout } from '../../../services/utils.service';
+import { CustomInput } from '../custom-input';
+
+@Component({
+  selector: 'input-decimal, input-number, input-currency, inout-percentage',
+  templateUrl: './input-decimal.component.html',
+  styleUrls: ['./input-decimal.component.scss', '../inputs.scss'],
+  providers: InputProviderFactory.GetProvider(InputDecimalComponent)
+})
+export class InputDecimalComponent extends CustomInput<number> implements OnInit {
+
+  @Input() configuration: InputDecimalConfiguration | InputNumberConfiguration | InputCurrencyConfiguration;
+
+  constructor(
+    @Optional() @Host() @SkipSelf()
+    override controlContainer: ControlContainer,
+    override elementRef: ElementRef
+  ) { super(); this._model = 0; }
+
+  override async ngOnInit() {
+    super.ngOnInit();
+
+    this.HandleSelector();
+    this.setDivider();
+  }
+
+  digitsInfo: string = "1.2-2";
+  setDigitsInfo(): void { this.digitsInfo = `1.${this.configuration.precision}-${this.configuration.precision}`; }
+  HandleSelector(): void{
+    const selector: string = this.elementRef.nativeElement.tagName.toLowerCase().split('-')[1];
+
+    if(selector == "number"   && !this.configuration){ this.configuration = new InputNumberConfiguration();   } else
+    if(selector == "decimal"  && !this.configuration){ this.configuration = new InputDecimalConfiguration();  } else
+    if(selector == "currency" && !this.configuration){ this.configuration = new InputCurrencyConfiguration(); }
+    this.setDigitsInfo();
+  }
+
+  override writeValue(value: number){ this._model = value; }
+
+  override get model(): string      { 
+    var formated = formatNumber(this._model, "pt-BR", this.digitsInfo);
+    if(this.configuration.thousandSeparator){  
+      return formated;
+    }else{
+      return formated.replaceAll(thousandSeparator, '')
+    } 
+  }
+  override set model(value: number) { this._model = value; this.propagateChange(this._model); }
+
+  //#region [ Event Handler ]
+  @HostListener('keydown', ['$event'])
+  onKeyDown(event: any) {
+    this.eventType = 0;
+    this.event = event;
+    this.key   = event.key;
+    
+    this.altKey   = this.event.altKey;
+    this.ctrlKey  = this.event.ctrlKey;
+    this.shiftKey = this.event.shiftKey;
+
+    this.startPosition = event.target.selectionStart;
+    this.endPosition   = event.target.selectionEnd;
+
+    this.value = event.target.value;
+
+    this.HandleBrowser();
+  }
+  
+  @HostListener('paste', ['$event'])
+  onPaste(event: any) {
+    this.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.model = n;
+    } else{
+
+    }
+    event.preventDefault();
+  }
+
+  key: string | null | undefined;
+  
+  altKey  : boolean = false;
+  ctrlKey : boolean = false;
+  shiftKey: boolean = false;
+
+  startPosition : number;
+  endPosition   : number;
+
+  value: string;
+
+  event    : any;
+  eventType: number;
+  
+  atLeft: string;
+  atRight: string;
+
+  HandleBrowser(){
+    this.atLeft  = this.value.slice(0, this.startPosition); 
+    this.atRight = this.value.slice(this.endPosition, this.value.length); 
+    if(["-"].includes(this.key)){ 
+      return this.HandleNegative();
+    }else
+    if(["V", "v"].includes(this.key) && this.ctrlKey){ 
+      //@HostListener('paste', ['$event'])
+    }else
+    if(lstNumbers.includes(this.key)){ 
+      return this.HandleNumber(); 
+    }else
+    if(lstEspecialCases.includes(this.key)){ 
+      return this.HandleEspecial(); 
+    }else
+    if(["A", "a"].includes(this.key) && this.ctrlKey){ 
+      return; 
+    }else
+    if(["C", "c"].includes(this.key) && this.ctrlKey){ 
+      return this.HandleCopy(); 
+    }else
+    if(lstIgnoreNotPrevent.includes(this.key)){ 
+      return; 
+    }else
+    this.event.preventDefault();
+  }
+
+  divider: number;
+  setDivider(){
+    var d = "1";
+    for(let i = 0; i < this.configuration.precision; i++){
+      d += "0"; 
+    }
+    this.divider = Number(d);
+  }
+
+  async HandleNumber(){
+    this.event.preventDefault();
+
+    var focusEnd = this.startPosition == 0 && this.endPosition == this.model.length;
+    /** [ Remove decimalSeparator & thousandSeparator ] */
+    const f = this.atLeft + this.key + this.atRight;
+    const CurrentValue: number = this.SanitizeValue(f);
+    if(CurrentValue == this._model){ return false; }
+    if(CurrentValue > decimalMaxValue){
+      return false;
+    }
+    
+    //[ Handle Set Cursor Position]
+    this.model = CurrentValue;
+    const newPos = this.startPosition + 1 + this.model.split('.').length - this.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.event.target.setSelectionRange(newPos, newPos); 
+    if(focusEnd){
+      this.event.target.setSelectionRange(this.model.length, this.model.length); 
+    }
+
+    return false;
+  }
+ 
+  async HandleNegative(){
+    this.event.preventDefault();
+
+    var focusEnd = this.startPosition == 0 && this.endPosition == this.model.length;
+    /** [ Remove decimalSeparator & thousandSeparator ] */
+    var f;
+    if(!this.atLeft.includes('-')){
+      f = this.key + this.atLeft + this.atRight;
+    }else{
+      f = (this.atLeft + this.atRight).replace('-', '')
+    }
+    if(f == "-"){ 
+      if(this.value.includes('-')){
+        f = this.value.replace('-', '');
+      }
+      else{
+        f = `-${this.value}`;
+      }
+    }
+
+    const CurrentValue: number = this.SanitizeValue(f);
+    if(CurrentValue == this._model){ return false; }
+    
+    //[ Handle Set Cursor Position]
+    this.model = CurrentValue;
+    const newPos = this.startPosition + 1 + this.model.split('.').length - this.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.event.target.setSelectionRange(newPos, newPos); 
+    if(focusEnd){
+      this.event.target.setSelectionRange(this.model.length, this.model.length); 
+    }
+    return false;
+  }
+
+  async HandleEspecial(){
+    this.event.preventDefault();
+    if(this.startPosition == this.endPosition){
+      if(this.key == "Backspace"){
+        if(this.startPosition == this.endPosition && this.startPosition == 0){ return false; }
+
+        const previousChar: string = this.atLeft[this.atLeft.length - 1];
+        const isNumber = lstNumbers.includes(previousChar);
+        const f = this.atLeft.slice(0, this.atLeft.length - (isNumber ? 1 : 2)) + this.atRight;
+        const CurrentValue = this.SanitizeValue(f);
+        
+        //[ Handle Set Cursor Position]
+        this.model = CurrentValue;
+        await Timeout(0);
+        this.event.target.setSelectionRange(this.startPosition, this.startPosition); 
+        
+        return false;
+      }else
+      if(this.key == "Delete"){
+        const nextChar: string = this.atRight[0];
+        const isNumber = lstNumbers.includes(nextChar);
+        const f = this.atLeft + this.atRight.slice(isNumber ? 1 : 2);
+        const CurrentValue = this.SanitizeValue(f);
+        
+        //[ Handle Set Cursor Position]
+        this.model = CurrentValue;
+        var newPos: number = this.startPosition - 1
+        if(newPos <= -1){ newPos = 0; }
+
+        await Timeout(0);
+        this.event.target.setSelectionRange(newPos, newPos);
+        
+        return false;
+      }
+    }else{
+      const f = this.atLeft + this.atRight;
+      const CurrentValue = this.SanitizeValue(f);
+      this.model = CurrentValue;
+      
+      await Timeout(0);
+      this.event.target.setSelectionRange(this.model.length, this.model.length); 
+
+      return false;
+    }
+  }
+
+  async HandleCopy(){
+    //[ Not necessary, default behaviour might work ]
+    // this.event.preventDefault();
+
+    // var str = this.model;
+    // var lst = str.split('');
+    // lst.splice(this.endPosition, str.length - this.endPosition);
+    // lst.splice(0, this.startPosition)
+    // var copy = lst.join('').replaceAll(this.configuration.thousandSeparator, '').replace(this.configuration.decimalSeparator, '.');
+    // console.log(copy)
+    // Clipboard.write({string: copy}).catch(() => {
+    //   navigator.clipboard.writeText(copy);
+    // });
+  }
+
+  SanitizeValue(f: string): number{
+    var CurrentValue: number = Number(Sanitize(f)) / this.divider;
+    //[ Cancela se o valor for muito alto ]
+    if(CurrentValue >= decimalMaxValue){ 
+      return this._model; 
+    }
+    return CurrentValue;
+  }
+  //#endregion [ Event Handler ]
+}
+
+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"
+];

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

@@ -0,0 +1,42 @@
+export class InputDecimalConfiguration{
+  prefix      : string;
+  sufix       : string;
+  placeholder : string;
+
+  constructor(
+    /** Declara a quantidade de numeros apos o ponto  */
+    public precision: number = 2, 
+    /** Texto no inicio do input */
+    prefix: string | null = null, 
+    /** Texto no fim do input */
+    sufix: string | null = null, 
+    /** Se = false não aplica virgulas no lugar do separador a cada 3 unidades */
+    public thousandSeparator: string = '.',
+    public decimalSeparator : string = ','
+  ){
+    if(!prefix){ this.prefix = ''; }else{ this.prefix = prefix; }
+    if(!sufix ){ this.sufix  = ''; }else{ this.sufix  = sufix; }
+
+    this.placeholder = "-";
+    if(precision > 0){
+      this.placeholder += this.decimalSeparator;
+      for(let i = precision; i > 0; i--){
+        this.placeholder += "-";
+      }
+    }
+  }
+} 
+export class InputNumberConfiguration extends InputDecimalConfiguration {
+  constructor(
+    prefix: string = "", 
+    sufix : string = "", 
+    thousandSeparator: string = '.'
+  ){
+    super(0, prefix, sufix, thousandSeparator);
+  }
+}
+export class InputCurrencyConfiguration extends InputDecimalConfiguration {
+  constructor(prefix: string = "R$", sufix: string = "", thousandSeparator: string = '.'){
+    super(2, prefix, sufix, thousandSeparator);
+  }
+}

package/src/lib/components/inputs/input-default-configurations.ts

@@ -0,0 +1,15 @@
+import { InputDecimalConfiguration, InputNumberConfiguration } from "./input-decimal/input-decimal.configuration";
+
+export class InputsDefaultConfigurations {
+  static readonly configurationDecimalPercentage: InputDecimalConfiguration = new InputDecimalConfiguration(2, null, '%');
+  static readonly configurationDecimalDegree    : InputDecimalConfiguration = new InputDecimalConfiguration(2, null, "°C");
+  static readonly configurationDecimalM3H       : InputDecimalConfiguration = new InputDecimalConfiguration(2, null, "m³/h");
+  static readonly configurationDecimalMeters    : InputDecimalConfiguration = new InputDecimalConfiguration(2, null, "m");
+  static readonly configurationDecimalMilimeters: InputDecimalConfiguration = new InputDecimalConfiguration(2, null, "mm");
+
+  static readonly configurationNumberPercentage: InputNumberConfiguration = new InputNumberConfiguration(null, '%');
+  static readonly configurationNumberDegree    : InputNumberConfiguration = new InputNumberConfiguration(null, "°C");
+  static readonly configurationNumberM3H       : InputNumberConfiguration = new InputNumberConfiguration(null, "m³/h");
+  static readonly configurationNumberMeters    : InputNumberConfiguration = new InputNumberConfiguration(null, "m");
+  static readonly configurationNumberMilimeters: InputNumberConfiguration = new InputNumberConfiguration(null, "mm");
+}