@sapphire-ion/framework 0.30.26 → 0.30.28

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

@@ -0,0 +1,323 @@
+import { Component, ContentChildren, ElementRef, Host, HostListener, ModelSignal, OnDestroy, OnInit, Optional, QueryList, Signal, SkipSelf, ViewChild, ViewChildren, WritableSignal, computed, effect, forwardRef, model, signal } from '@angular/core';
+import { IonInput, IonItem, IonPopover, IonSearchbar } from '@ionic/angular';
+import { ControlContainer, ControlValueAccessor } from '@angular/forms';
+import { Observable, Subscription, interval } from 'rxjs';
+import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+
+import { BindLabelFactory, BindValueFactory, DefaultModelOptions, InputSelectConfiguration } from './input.select.configuration';
+import { InputSelectInternalOptionComponent } from './input-select-internal-option/input-select-internal-option.component';
+import { InputSelectOptionComponent } from './input-select-option/input-select-option.component';
+import { ISelect, ISelectOption } from './ISelect';
+import { InputProviderFactory } from '../input-provider-factory';
+import { CustomSignalInput } from '../custom-signal-input';
+import { Search } from '../../../services/utils.service';
+
+@Component({
+  selector: 'input-select',
+  templateUrl: './input-select.component.html',
+  styleUrls: ['./input-select.component.scss', '../inputs.scss'],
+  providers: [InputProviderFactory.GetProvider(InputSelectComponent, 
+    [
+      { 
+        provide: ISelect, useExisting: forwardRef(() => InputSelectComponent)
+      }
+    ]
+  )]
+})
+export class InputSelectComponent extends CustomSignalInput<any> implements OnInit, OnDestroy, ControlValueAccessor, ISelect {
+
+  /** Items disponíveis no select */
+  public items            : ModelSignal<any[]>                    = model<any[]>([]);
+  /** Configuração do select */
+  public configuration    : ModelSignal<InputSelectConfiguration> = model<InputSelectConfiguration>(new InputSelectConfiguration()); 
+  public loadingFromLoader: boolean = false;
+
+  @ContentChildren(InputSelectOptionComponent) lstOptions: QueryList<InputSelectOptionComponent>;
+  @ViewChildren(InputSelectInternalOptionComponent) lstInternalOptions: QueryList<InputSelectInternalOptionComponent>;
+  @ViewChild(CdkVirtualScrollViewport, { read: ElementRef<any> }) cdkVirtualScrollViewport: ElementRef<any>
+
+  private useDefaultModelOptions: WritableSignal<boolean> = signal<boolean>(false);
+  protected bindValue: Signal<((args: any) => any)>         = computed(() => { 
+    if(this.useDefaultModelOptions()){ return ((obj: DefaultModelOptions): string => { return obj.value; }); }
+    return BindValueFactory(this.configuration());
+  });
+  protected bindLabel: Signal<((args: any) => string)>      = computed(() => {
+    if(this.useDefaultModelOptions()){ return ((obj: DefaultModelOptions): string => { return obj.label; }); }
+    return BindLabelFactory(this.configuration());
+  });
+
+  constructor(
+    @Optional() @Host() @SkipSelf()
+    override controlContainer: ControlContainer,
+    override elementRef      : ElementRef
+  ) { super();
+    effect(() => { this.Update(); }, { allowSignalWrites: true });
+
+    this.updateInterval     = interval(1000);
+    this.updateSubscription = this.updateInterval.subscribe(() => {
+      if(this.lastItemsQtd != this.items().length){
+        this.lastItemsQtd = this.items().length;
+        this.Update();
+      } 
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.updateSubscription.unsubscribe();
+  }
+
+  updateInterval: Observable<number> | null;
+  updateSubscription: Subscription;
+
+  lastItemsQtd: number | null = null;
+  
+  override ngOnInit() {
+    super.ngOnInit();
+
+    this.configuration().loader.AddComponent(this);
+    this.configuration().loader.Refresh(this.items());
+  }
+
+  public Clear(): void{ 
+    this.model = null; 
+    this.Update();
+  }
+  
+  protected CurrentLabel      : string  = "";
+  protected CurrentlyNoValue  : boolean = true;
+
+  public Update(){
+    this.UpdateSelected();
+    this.UpdateCurrentLabel(); 
+  }
+  private UpdateCurrentLabel(): void{
+    if(this._model == null){ 
+      this.CurrentLabel = this.configuration().placeholder;
+      this.CurrentlyNoValue = true;
+      return;
+    }
+    if(!this.configuration().multiple){
+      const m: any | null = this.items().find(p => this.bindValue()(p) == this._model);
+      if(m){ 
+        this.CurrentLabel     = this.bindLabel()(m);
+        this.CurrentlyNoValue = false; 
+      }
+      return;
+    }else{
+      if(!this._model){ 
+        this.CurrentLabel = this.configuration().placeholder; 
+        this.CurrentlyNoValue = true;
+        return; 
+      }else
+      if(Array.isArray(this.model) && !this.model.length){ 
+        this.CurrentLabel = this.configuration().placeholder; 
+        this.CurrentlyNoValue = true;
+        return; 
+      }
+      this.CurrentLabel     = ""; 
+      this.CurrentlyNoValue = false;
+      return;
+    }
+  }
+  private UpdateSelected(){
+    if(this.lstOptions && this.lstOptions.length){
+      this.lstOptions.forEach(p => p.isSelected = false);
+      this.lstOptions.filter(p => Array.isArray(this._model) ? this._model.includes(p.value) : this._model == p.value).forEach(p => p.isSelected = true);
+    }
+  }
+
+  IsSelected(item: any){
+    if(Array.isArray(this._model)){
+      return this._model.includes(this.bindValue()(item));
+    }
+    return this._model == this.bindValue()(item);
+  }
+
+  /** Applies only on multiple */
+  protected GetSelectedItens(): any[]{
+    if(this._model && this.lstOptions.length){
+      return this.lstOptions.filter(p => p.isSelected).map(p => p.model()); 
+    }
+    if(this._model && this.items()){
+      return this.items().filter(p => Array.isArray(this._model) ? this._model.includes(this.bindValue()(p)) : this._model == this.bindValue()(p)); 
+    }
+
+    return [];
+  }
+
+  //[ Model ]
+  override _model: any = null;
+  override get model(): any      { return this._model;  }
+  override set model(value: any) { 
+    this.SetModel(value);
+    this.propagateChange(this._model); 
+  }
+  protected SetModel(value: any): void { 
+    if(value == null ){ this._model = null; return; }
+
+    this._model = value;
+
+    this.Update();
+    return; 
+  }
+
+  protected SearchChanged(): void{
+    if(this.lstOptions.length){
+      this.useDefaultModelOptions.set(true);
+      var lst = Search(this.lstOptions.map(p => p.model()), this.Search(), this.bindLabel()); 
+      this.lstOptions.forEach(p => p.hidden = !lst.includes(p.model()))
+    }
+  }
+  
+  protected GetUseDefaultModelOptions(): boolean{
+    if(this.lstOptions && this.lstOptions.length){ return true; }
+    return false;
+  }
+
+  public UpdateUseDefaultModelOptions(): void{
+    this.useDefaultModelOptions.set(this.GetUseDefaultModelOptions());
+    if(this.useDefaultModelOptions()){ 
+      if(this.items().length != this.lstOptions.length){
+        this.items.set(this.lstOptions.map(p => p.model())); 
+      }
+    }
+  }
+
+  //[ Select ]
+  override writeValue(obj: any): void { this.SetModel(obj); }
+
+  public Select(item: any): void{
+    this.UpdateUseDefaultModelOptions();
+    
+    if(!this.configuration().multiple){ 
+      this.model = this.bindValue()(item); 
+    } 
+    else{
+      var value =  this.bindValue()(item);
+
+      if(this._model){
+        if(this._model.includes(value)){ 
+          this.model = [...this._model.filter(p => p != value)]; 
+        }
+        else{
+          this.model = [...this._model, value];
+        }
+        return;
+      }
+
+      this.model = [value];
+      return;
+    }
+  }
+
+  protected interfaceOptions = { cssClass : 'wider-popover' }
+
+  @ViewChild('container', { read: ElementRef }) inputContainer: ElementRef<HTMLElement>;
+  @ViewChild(IonPopover) ionPopoverComponent: IonPopover;
+  @ViewChild(IonPopover, { read: ElementRef }) ionPopoverElement: ElementRef<HTMLElement>;
+  @ViewChild(IonSearchbar) searchbarComponent: IonSearchbar;
+
+  public async PresentPopover($event: MouseEvent) {
+    Object.defineProperty($event, 'target', { writable: false, value: this.inputContainer.nativeElement });
+    const Popover        = this.ionPopoverComponent;
+    const PopoverElement = this.ionPopoverElement.nativeElement as HTMLElement;
+    
+    const PopoverContent = Array.from(
+      Array.from(PopoverElement.shadowRoot.children).find(
+        p => p.classList.contains("popover-wrapper")
+      ).children
+    ).find(
+      p => p.classList.contains("popover-content")
+    ) as HTMLElement
+    PopoverContent.style.width = this.inputContainer.nativeElement.offsetWidth + 'px';
+    await Popover.present($event);
+    this.searchbarComponent.setFocus();
+
+    if(this.cdkVirtualScrollViewport){
+      this.cdkVirtualScrollViewport.nativeElement.scroll({ top: 1, behavior: 'smooth' });
+    }
+
+    this.focusedModel = null;
+    this.UpdateUseDefaultModelOptions();
+  };
+
+  protected Search        : ModelSignal<string> = model<string>("");
+  protected lstSearchItens: Signal<any[]>       = computed<any[]>(() => { return Search(this.items(), this.Search(), this.bindLabel()); })
+
+  //#region [ Arrow/Tab Control ]
+  @ViewChild(IonInput) inputComponent: IonInput;
+  @ViewChild(IonItem, { read: ElementRef })  itemComponent : ElementRef<HTMLElement>;
+  @HostListener('document:keydown', ['$event'])
+  async HandleKeyboardEvent(event: KeyboardEvent) {
+    if(!this.inputComponent || !this.searchbarComponent){ return; }
+    
+    const inputComponent     = await this.inputComponent.getInputElement();
+    const searchbarComponent = await this.searchbarComponent.getInputElement();
+    
+    if(event.target == inputComponent && event.key == "ArrowDown" && this.configuration().searcheable){
+      this.itemComponent.nativeElement.click();
+      event.preventDefault();
+    }else
+    if(event.target == searchbarComponent){
+      this.UpdateUseDefaultModelOptions();
+
+      const items  = this.lstSearchItens();
+      if(event.key == "ArrowDown"){
+        if(this.focusedModel){
+          const index = items.indexOf(this.focusedModel);
+          
+          if(items[index + 1]){
+            this.SetFocusedElement(items[index + 1]);
+          }else{
+            this.SetFocusedElement(items[0]);
+          }
+        }else{
+          if(items[0]){
+            this.SetFocusedElement(items[0]);
+          }
+        }
+      }else
+      if(event.key == "ArrowUp"){
+        if(this.focusedModel){
+          const index = items.indexOf(this.focusedModel);
+
+          if(items[index - 1]){
+            this.SetFocusedElement(items[index - 1]);
+          }else{
+            this.SetFocusedElement(items[items.length -1]);
+          }
+        }
+      }else
+      if(event.key == "Enter"){
+        var Option: ISelectOption;
+        if(this.useDefaultModelOptions()){
+          Option = this.lstOptions.find(p => p.model() == this.focusedModel);
+        }else{
+          Option = this.lstInternalOptions.find(p => p.model == this.focusedModel);
+        }
+        if(!Option.disabled){
+          this.Select(this.focusedModel);
+        }
+      }
+    }
+  }
+  SetFocusedElement(focusedModel: any, scroll: boolean = true,): void{
+    this.focusedModel = focusedModel;
+    
+    var Option: ISelectOption;
+    if(this.useDefaultModelOptions()){
+      Option = this.lstOptions.find(p => p.model() == focusedModel);
+      this.lstOptions.filter(p => p.onFocus).forEach(p => p.onFocus = false);
+      Option.onFocus = true;
+    }else{
+      Option = this.lstInternalOptions.find(p => p.model == focusedModel);
+      this.lstInternalOptions.filter(p => p.onFocus).forEach(p => p.onFocus = false);
+      Option.onFocus = true;
+    }
+    
+    if(scroll){ Option.GetNativeElement().scrollIntoView({ behavior: 'smooth' }); }
+  }
+
+  focusedModel: any | null;
+  //#endregion [ Arrow/Tab Control ]
+}

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

@@ -0,0 +1,188 @@
+import { Observable, firstValueFrom } from "rxjs";
+
+import { HttpService, ViewRetorno } from "../../../services/web/http.service";
+import { HttpServiceAtivo } from "../../../services/web/http.ativo.service";
+import { ViewFiltros } from "../../../classes/filters/view-filtros";
+import { INT_MAX } from "../../../services/utils.service";
+import { ISelect } from "./ISelect";
+import { Comparison } from "../../../classes/comparison/comparison";
+
+export type DefaultModelOptions = { value: string, label: string };
+
+export class InputSelectConfiguration{
+  placeholder     : string = "Selecione um item..."
+  noItensFoundText: string = "Sem items encontrados..."
+
+  loader: InputSelectDataLoader;
+  loadFromArray   : any[];
+  loadFromService : HttpService | HttpServiceAtivo
+  loadFromFunction: Observable<any>
+
+  public vFiltros: ViewFiltros | null = null;
+
+  constructor(
+    /** Valor que será setado no formControl */
+    public bindValue: string | ((obj: any) => any)     = "id"  ,
+    /** Valor que será exibido */
+    public bindLabel: string | ((obj: any) => string)  = "nome", 
+    
+    /** Indica se o select pode ser nulo e limpavel */
+    public clearable  : boolean = true, 
+    /** Indica se o select pode ser pesquisado */
+    public searcheable: boolean = true, 
+    
+    /** 
+     * Se LoadFrom instanceof HttpService      -> Os dados serão carregados do List()
+     * Se LoadFrom instanceof HttpServiceAtivo -> Os dados serão carregados do ListAtivo()
+     * Se LoadFrom instanceof Observable       -> Os dados serão carregados da função indicada
+     * Se LoadFrom instanceof Array            -> Os dados serão o array
+     */
+    public loadFrom?:  HttpService | HttpServiceAtivo | Observable<ViewRetorno> | any[], 
+    /** Se = true Os valores no form control seráo um array dos items selecionados */
+    public multiple : boolean = false,
+    /** Aplica os filtros na pesquisa */
+    vFiltros : Partial<{ 
+      /** Aplica uma pesquisa em texto  */
+      search: string
+      /** Propriedade de ordenação */
+      orderByProperty: string
+      /** Orientação de ordenação */
+      ascending: boolean,
+      /** Filtro  */
+      filter: Comparison[]
+    }> | null = null,
+    /** Desativa os items que estão de acordo com a função */
+    public disableConditional: ((obj: any) => boolean) | null = null
+  ){
+    this.clearable   = clearable;
+    this.searcheable = searcheable;
+    this.multiple    = multiple;
+
+    if(vFiltros != null){
+      const v = vFiltros;
+      if(v.ascending == null || v.ascending == undefined){ v.ascending = true; }
+      this.vFiltros = new ViewFiltros(INT_MAX, v.search, 1, v.orderByProperty, v.ascending);
+      (this.vFiltros as ViewFiltros).filter = v.filter;
+    }
+
+    if(loadFrom){
+      if(Array.isArray(loadFrom)){ 
+        this.loadFromArray    = loadFrom; 
+      } else
+      if(loadFrom instanceof HttpService || loadFrom instanceof HttpServiceAtivo){ 
+        this.loadFromService  = loadFrom;
+      } else {  
+        this.loadFromFunction = loadFrom;
+      }
+    }
+    this.loader = new InputSelectDataLoader(this);
+  }
+}
+
+export class InputSelectDataLoader{
+  lstComponents: ISelect[] = [];
+  configuration: InputSelectConfiguration;
+
+  /** Valor que será setado no formControl */
+  public bindValue: ((obj: any) => any)   | null = null;
+  /** Valor que será exibido */
+  public bindLabel: ((obj: any) => string)| null = null;
+
+  constructor(configuration: InputSelectConfiguration){ 
+    this.configuration = configuration; 
+    this.bindValue = BindValueFactory(configuration)
+    this.bindLabel = BindLabelFactory(configuration)
+  }
+
+  public GetLabel(value: any){
+    if(!this.items || !this.bindValue || !this.bindLabel){ return ""; }
+    const item = this.items.find(p => this.bindValue(p) == value);
+    if(!item){ return "" ;}
+    return this.bindLabel(item);
+  }
+
+  AddComponent(component: ISelect){ 
+    this.lstComponents.push(component);
+  }
+
+  private _isLoaded: boolean = false;
+
+  async Refresh(items?: any[]): Promise<void>{
+    this.lstComponents.forEach(component => { component.loadingFromLoader = true; });
+    
+    if(!this.configuration.loadFromService && !this.configuration.loadFromFunction && (!this.configuration.loadFromArray || !(this.configuration.loadFromArray.length > 0))){
+      this.items = items;
+      this._isLoaded = true;
+      this.lstComponents.forEach(component => { component.items.set(this.items); });
+    }
+    
+    try{
+      await this.Load();
+      this._isLoaded = true;
+      this.lstComponents.forEach(component => { component.items.set(this.items); });
+    }
+    finally{
+      this.lstComponents.forEach(component => { component.loadingFromLoader = false; });
+    }
+  }
+
+  private SetLstComponentsThisItens(){
+    this.lstComponents.forEach(component => { component.items.set(this.items); return; });
+  }
+
+  items: any[] = [];
+  async Load(): Promise<void>{
+    if(this._isLoaded){
+      this.SetLstComponentsThisItens();
+      return;
+    }
+
+    //[ Load from Array ]
+    if(this.configuration.loadFromArray != undefined && this.configuration.loadFromArray.length){
+      this.items = this.configuration.loadFromArray;
+      this.SetLstComponentsThisItens();
+      return;
+    }
+
+    //[ Load from api ]
+    var vFiltros: ViewFiltros | null = this.configuration.vFiltros;
+    try{
+      var lstDados: any[] = [];
+      
+      if(this.configuration.loadFromService){
+        lstDados = (await firstValueFrom(this.configuration.loadFromService.List(vFiltros))).lstDados
+      }else{
+        lstDados = (await firstValueFrom(this.configuration.loadFromFunction)).lstDados;
+      }
+
+      this.items = lstDados;
+      this.SetLstComponentsThisItens();
+    }finally{ return; }
+  }
+}
+
+export function BindValueFactory(configuration: InputSelectConfiguration): ((obj: any) => any) {
+  const cBindValue = configuration.bindValue;
+  var bindValue: ((args: any) => any) = null;
+  if(typeof(cBindValue) == 'string'){
+    var bvS: string               = cBindValue;
+    bindValue = ((obj: any): any => { return obj[bvS]; });
+  }else{
+    var bvF: ((args: any) => any) = cBindValue;
+    bindValue = ((obj: any): any => { return bvF(obj); });
+  }
+  return bindValue;
+}
+
+export function BindLabelFactory(configuration: InputSelectConfiguration): ((obj: any) => string){
+  const cBindLabel = configuration.bindLabel;
+  var bindLabel: ((args: any) => string) = null;
+  if(typeof(cBindLabel) == 'string'){
+    var blS: string               = cBindLabel;
+    bindLabel = ((obj: any): string => { return obj[blS] + ''; });
+  }else{
+    var blF: ((args: any) => any) = cBindLabel;
+    bindLabel = ((obj: any): string => { return blF(obj) + ''; });
+  }
+  return bindLabel;
+}

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

@@ -0,0 +1,22 @@
+<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 [type]="type" (ionBlur)="blurEmitter.emit(model)" [maxlength]="configuration.maxlength" labelPlacement="stacked" [(ngModel)]="model">
+            @if (label) {
+              <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-string/input-string.component.ts

@@ -0,0 +1,36 @@
+import { Component, ElementRef, Host, Input, OnInit, Optional, Self, SkipSelf } from '@angular/core';
+import { ControlContainer } from '@angular/forms';
+
+import { InputStringConfiguration } from './input-string.configuration';
+import { InputProviderFactory } from '../input-provider-factory';
+import { CustomInput } from '../custom-input';
+
+@Component({
+  selector: 'input-string',
+  templateUrl: './input-string.component.html',
+  styleUrls: ['./input-string.component.scss', '../inputs.scss'],
+  providers: InputProviderFactory.GetProvider(InputStringComponent)
+})
+export class InputStringComponent extends CustomInput<string> implements OnInit {
+
+  @Input() configuration: InputStringConfiguration = new InputStringConfiguration();
+  @Input() type: 'text' | 'password' = 'text';
+
+  constructor(
+    @Optional() @Host() @SkipSelf()
+    override controlContainer: ControlContainer,
+    override elementRef: ElementRef
+  ) { super(); }
+
+  override async ngOnInit() {
+    super.ngOnInit();
+  }
+
+  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); }
+
+  setModel(value){
+    if(value == null){ this._model = '' } else { this._model = value + '' }
+  }
+}

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

@@ -0,0 +1,18 @@
+export enum InputStringType{
+  Text     = "text", 
+  Password = "password", 
+  Email    = "email", 
+  Number   = "number", 
+  Search   = "search", 
+  Tel      = "tel", 
+  Url      = "url"
+}
+
+export class InputStringConfiguration{
+  maxlength: number;
+  type: InputStringType = InputStringType.Text;
+  constructor(type: InputStringType = InputStringType.Text, maxlength: number = 50){
+    this.type      = type; 
+    this.maxlength = maxlength;
+  }
+}

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

@@ -0,0 +1,25 @@
+<div class="flex relative overflow-hidden">
+  <input-loading [loading]="loading"></input-loading>
+  <ion-card class="!size-full !max-h-full focus-within:on-focus ion-card-input" [disabled]="loading || disabled"
+      [ngClass]="{
+        'invalid'  : invalid,
+        'submitted': submitted,
+        'disabled' : disabled,
+      }"
+    >
+    <ion-card-content class="!size-full">
+      <div class="flex size-full">
+        <ion-item class="size-full" [ngClass]="{'submitted': submitted, 'invalid': invalid, 'required': required}" lines="none">
+          <ion-textarea 
+            [autoGrow]="true" 
+            class="!size-full"
+            [maxlength]="configuration.maxlength" 
+            labelPlacement="stacked" 
+            [(ngModel)]="model">
+            <ion-text id="label" [ngClass]="{'required': required}" slot="label"> {{label}} </ion-text>
+          </ion-textarea>
+        </ion-item>
+      </div>
+    </ion-card-content>
+  </ion-card>
+</div>

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

@@ -0,0 +1,35 @@
+import { Component, ElementRef, Host, Input, OnInit, Optional, SkipSelf } from '@angular/core';
+import { ControlContainer } from '@angular/forms';
+
+import { InputStringConfiguration } from '../input-string/input-string.configuration';
+import { InputProviderFactory } from '../input-provider-factory';
+import { CustomInput } from '../custom-input';
+
+@Component({
+  selector: 'input-textarea',
+  templateUrl: './input-textarea.component.html',
+  styleUrls: ['./input-textarea.component.scss', '../inputs.scss'],
+  providers: InputProviderFactory.GetProvider(InputTextareaComponent)
+})
+export class InputTextareaComponent extends CustomInput<string> implements OnInit {
+
+  @Input() configuration: InputStringConfiguration = new InputStringConfiguration();
+
+  constructor(
+    @Optional() @Host() @SkipSelf()
+    override controlContainer: ControlContainer,
+    override elementRef: ElementRef
+  ) { super(); }
+
+  override async ngOnInit() {
+    super.ngOnInit();
+  }
+
+  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); }
+
+  setModel(value){
+    if(value == null){ this._model = '' } else { this._model = value + '' }
+  }
+}

package/src/lib/components/inputs/input-type.ts

@@ -0,0 +1,16 @@
+export enum InputType {
+  Bool     = "Bool",
+  Currency = "Currency",
+  Date     = "Date",
+  DateTime = "DateTime",
+  Time     = "Time",
+  Decimal  = "Decimal",
+  Number   = "Number",
+  File     = "File",
+  String   = "String",
+  TextArea = "TextArea",
+  Select   = "Select",
+  Cpf      = "Cpf",
+  Cpnj     = "Cnpj",
+  CpfCnpj  = "CpfCnpj",
+}