@sapphire-ion/framework 1.2.62 → 1.3.1

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

@@ -0,0 +1,283 @@
+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" ];

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

@@ -0,0 +1,47 @@
+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);
+  }
+}
+export class InputPercentageConfiguration extends InputDecimalConfiguration {
+  constructor(prefix: string = "", 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");
+}

package/src/lib/components/inputs/input-file/download-button/download-button.component.html

@@ -0,0 +1,56 @@
+@if(lstFiles().length == 0){
+  <ion-button [color]="color" fill="outline" [disabled]="true" [size]="size"> 
+    <ion-icon name="close-circle" slot="start"></ion-icon>  
+    <ion-label> Sem arquivos... </ion-label>
+  </ion-button>
+}
+@else if(lstFiles().length == 1){
+  <ion-button [color]="color" *ngVar="storageService.GetProgress(lstFiles()[0]) as val" class="relative block {{expand == 'block' ? 'size-full' : ''}}" [disabled]="val != 0 || disabled" (click)="Download(lstFiles()[0])" fill="outline" [size]="size"> 
+    <ion-icon name="download" slot="start"></ion-icon>  
+    <ion-label>  {{customLabel ? label : Sanitize(lstFiles()[0])}} </ion-label>
+    <div class="absolute size-full h-[calc(100%+var(--padding-top)+var(--padding-bottom))] w-[calc(100%+var(--padding-end)+var(--padding-start))]">
+      <loading [type]="3" [loading]="val != 0"></loading>
+      <div class="size-full flex flex-row-reverse relative">
+        <ion-progress-bar class="absolute bottom-0 left-0 w-full h-1 default-transition" [ngClass]="{'-translate-y-4 opacity-0': (!val || val == 0)}" [value]="val"></ion-progress-bar>
+      </div>
+    </div>
+  </ion-button>
+}
+@else{
+  <ion-button [color]="color" [id]="guid" fill="outline" [size]="size"> 
+    <ion-icon name="download" slot="start"></ion-icon>  
+    <ion-label> {{lstFiles().length}} Arquivos </ion-label>
+  </ion-button>
+
+  <ion-popover [trigger]="guid" [keepContentsMounted]="true" triggerAction="click">
+    <ng-template>
+      <ion-content class="p-0 bg-transparent">
+        <ion-list>
+          @for (item of lstFiles(); track item; let i = $index; let l = $last) {
+            <section *ngVar="storageService.GetProgress(item) as val">
+              <ion-item style="--background: transparent" lines="{{l ? 'none' : 'full'}}" button [detail]="false">
+
+                <ion-icon name="download" (click)="Download(item)" slot="start"></ion-icon> 
+                @if (ExtensionIsImage(item)) {
+                  <ion-icon [id]="guid + '-' + i + '-nested-popover'" name="image" slot="start"></ion-icon> 
+                }
+
+                <ion-label>{{Sanitize(item)}}</ion-label>
+                <ion-text *ngIf="val != 0" slot="end" class="text-sm"><b>{{val * 100 | number : '1.2-2'}}%</b></ion-text>
+              </ion-item>
+              <ion-progress-bar class="h-0 default-transition" [ngClass]="{'h-1': val != 0 }" [value]="val"></ion-progress-bar>
+              <ion-popover *ngIf="ExtensionIsImage(item)" side="end" alignment="center" [trigger]="guid + '-' + i + '-nested-popover'" [dismissOnSelect]="true" triggerAction="click">
+                <ng-template>
+                  <ion-content *ngVar="isLoading(item) as isLoading">
+                    <loading    [hidden]="!isLoading"></loading>
+                    <ion-img    [hidden]="isLoading" [src]="apiUrl + item" (ionImgWillLoad)="SetLoading(item)" (ionImgDidLoad)="SetNotLoading(item)"></ion-img>
+                  </ion-content>
+                </ng-template>
+              </ion-popover>
+            </section>
+            }
+        </ion-list>
+      </ion-content>
+    </ng-template>
+  </ion-popover>
+}

package/src/lib/components/inputs/input-file/download-button/download-button.component.ts

@@ -0,0 +1,91 @@
+import { Component, computed, ElementRef, Input, model, ModelSignal, Signal } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+
+import { InputFileConfiguration } from '../input-file.configuration';
+import { ApiUrlProviderService } from '../../../../services/web/api-url-provider.service';
+import { InputProviderFactory } from '../../input-provider-factory';
+import { StorageService } from '../../../../services/web/storage.service';
+import { lstImageTypes } from '../input-file.configuration';
+import { Utils } from '../../../../services/utils.service';
+
+@Component({
+  selector: 'download-button',
+  templateUrl: './download-button.component.html',
+  styleUrls: ['./download-button.component.scss'],
+  providers: InputProviderFactory.GetProviders(DownloadButtonComponent)
+})
+export class DownloadButtonComponent implements ControlValueAccessor {
+
+  @Input() expand: string = "";
+  value: ModelSignal<string> = model<string>();
+  @Input() size: string = "small";
+  @Input() color: string = "primary";
+  @Input() params: any;
+  @Input() disabled: boolean;
+  @Input() post: boolean = false;
+  @Input() configuration: InputFileConfiguration = new InputFileConfiguration();
+  
+  @Input() customLabel: boolean = false;
+
+  @Input() label : string = "";
+
+  @Input() fileName : string = null;
+  constructor(
+    public storageService: StorageService,
+    private elementRef: ElementRef,
+    private apiUrlProviderService: ApiUrlProviderService
+  ) { }
+
+  registerOnChange(fn: any): void {
+    //throw new Error('Method not implemented.');
+  }
+  registerOnTouched(fn: any): void {
+    //throw new Error('Method not implemented.');
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    //throw new Error('Method not implemented.');
+  }
+
+  guid : string = "";
+  apiUrl: string;
+
+  ngOnInit() {
+    this.apiUrl = this.apiUrlProviderService.apiUrl;
+    this.guid  = `${Utils.GenerateGUID()}${this.elementRef.nativeElement.tagName.toLowerCase()}`
+  }
+
+  lstFiles: Signal<string[]> = computed(() => {
+    if(typeof(this.value()) == "string"){
+      return this.value().split(';');
+    }else{
+      return [];
+    }
+  });
+
+  writeValue(value: string): void { this.value.set(value); }
+
+  Download(value: string): void{
+    this.storageService.StartDownload(value, this.params, this.post, this.fileName);
+  }
+
+  Sanitize(v): string {
+    return StorageService.SanitizeFileName(v);
+  }
+
+  ExtensionIsImage(v){
+    try{
+      return lstImageTypes.includes(v.split('.')[v.split('.').length - 1])
+    }catch{}
+  }
+
+  lstLoading: string[] = [];
+  SetLoading(path: string){
+    this.lstLoading.push(path);
+  }
+  SetNotLoading(path: string){
+    this.lstLoading.splice(this.lstLoading.indexOf(path), 1);
+  }
+  isLoading(path: string){
+    return this.lstLoading.indexOf(path) != -1;
+  }
+}

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

@@ -0,0 +1,56 @@
+<div 
+  #inputContainer
+  class="input-container" 
+  
+  [class.required]="required()" 
+  [class.submitted]="submitted()" 
+  [class.invalid]="invalid" 
+  [class.disabled]="disabled()"
+  [class.loading]="loading()"
+>
+  <div class="input-label"> 
+    <span class="truncate">
+      {{label()}} 
+    </span>
+  </div>
+  <div tabindex="0" class="file-label-container text-dark !pb-1">
+     <ion-icon class="shrink-0" color="dark" name="document"></ion-icon> 
+    <span
+      class="block flex-1 min-w-0 truncate"
+      [title]="valueString"
+    >
+      {{ valueString }}
+    </span>
+
+    <div class="size-full flex justify-center items-center gap-1 shrink-0 w-fit">
+      @if(value()){
+        <ion-button class="rounded-full" fill="outline" color="danger" size="small"   (click)="Clear($event)">
+          <ion-icon name="trash" slot="icon-only"></ion-icon>
+        </ion-button>
+      }
+      @if(isString) {
+        <ion-button class="rounded-full allow-click !opacity-100" fill="outline" color="dark" size="small" (click)="Download()">
+          <ion-icon class="!opacity-100" name="cloud-download" slot="icon-only"></ion-icon>
+        </ion-button>
+      }
+      <ion-button class="rounded-full" fill="outline" color="dark" size="small"  (click)="Upload()">
+        <ion-icon slot="icon-only" name="cloud-upload"></ion-icon>
+      </ion-button>
+            <!-- @if(isString){
+              @if(storageService.GetProgress(this.value().toString())){
+                <ion-progress-bar [value]="storageService.GetProgress(this.value().toString())"></ion-progress-bar>
+              }
+              @if(isImage){
+                <image fill="clear" [src]="value().toString()"></image>
+              }
+            }
+            @else if(isImage){
+              <ion-img [src]="objectURL" class="w-full h-32"></ion-img>
+            } -->
+      </div>
+    </div>
+
+  <div class="loading-container" [class.loading]="loading()">
+    <ion-spinner></ion-spinner>
+  </div>
+</div>

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

@@ -0,0 +1,97 @@
+import { Component, ElementRef, forwardRef, input, InputSignal, OnInit, ViewChild } from '@angular/core';
+import { CustomInput } from '../custom-input';
+import { InputFileConfiguration } from './input-file.configuration';
+import { InputProviderFactory } from '../input-provider-factory';
+import { UtilsService } from '../../../services/utils.service';
+import { StorageService } from '../../../services/web/storage.service';
+
+@Component({
+  selector: 'input-file',
+  templateUrl: './input-file.component.html',
+  styleUrls: ['./input-file.component.scss', '../inputs.scss'],
+  providers: [
+    ...InputProviderFactory.GetProviders(InputFileComponent),
+    { provide: CustomInput, useExisting: forwardRef(() => InputFileComponent) },
+  ],
+  
+})
+export class InputFileComponent extends CustomInput<File | string> {
+
+  configuration: InputSignal<InputFileConfiguration> = input<InputFileConfiguration>(new InputFileConfiguration());
+
+  @ViewChild('inputContainer') inputContainer: ElementRef<HTMLDivElement>;
+  override setFocus(event: MouseEvent | null): void {
+    if(event){
+      this.Upload();
+    }
+    this.inputContainer.nativeElement.focus();
+  }
+
+  constructor(
+    private utilsService: UtilsService,
+    public storageService: StorageService
+  ) { super(); }
+
+  valueString: string = "";
+  isString: boolean = false;
+  isImage: boolean = false;
+  objectURL: string | null = null;
+
+
+  override writeValue(obj: File | string): void | Promise<void> {
+    this.value.set(obj);
+    this.SetValueString();
+    this.runValidation();
+  }
+  override SetValue(value: File | string): void {
+    this.value.set(value);
+    this.SetValueString();
+    this.runValidation();
+    this.propagateChange(this.value());
+  }
+  
+  SetValueString(): void {
+    this.objectURL = null;
+    this.isString = typeof this.value() == "string";
+    if(!this.value()) { this.valueString = "..."; return; }
+    this.valueString = typeof this.value() == "string" ?  StorageService.SanitizeFileName(this.value().toString()) : (this.value() as File).name;
+    
+    this.isImage = lstImage.includes(this.valueString.split('.').at(-1).toLowerCase());
+    if(this.isImage && !this.isString){
+      this.objectURL = URL.createObjectURL(this.value() as File);
+      
+    }
+  }
+
+  async Upload(): Promise<void>{
+    try{
+      const res = await this.utilsService.SelectFile(this.configuration());
+      if(res){ this.SetValue(res); }
+    }catch{}
+  }
+''
+  Clear(event: MouseEvent): void {
+    event.stopPropagation();
+    this.SetValue(null);
+  }
+
+  Download(): void{
+    this.storageService.StartDownload(this.value() as string);
+  }
+}
+export const lstImage: string[] = [
+  'jpe',
+  'jpg',
+  'jpeg',
+  'gif',
+  'png',
+  'bmp',
+  'ico',
+  'svg',
+  'svgz',
+  'tif',
+  'tiff',
+  'webp',
+  'jfif',
+  'avif',
+] 

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

@@ -0,0 +1,25 @@
+export class InputFileConfiguration{
+  constructor(
+    /** Tipos de arquivos que podem ser selecionados */
+    public types: any | [] = ['image/*'], 
+    // /** Declara se mais do que um arquivo pode ser selecionado */
+    // public multiple: boolean = false
+  ){}
+}
+
+export const lstImageTypes: string[] = [
+  'jpe',
+  'jpg',
+  'jpeg',
+  'gif',
+  'png',
+  'bmp',
+  'ico',
+  'svg',
+  'svgz',
+  'tif',
+  'tiff',
+  'webp',
+  'jfif',
+  'avif',
+]