@sapphire-ion/framework 1.2.63 → 1.3.2

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

@@ -0,0 +1,300 @@
+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 { Comparison } from "../../../classes/comparison/comparison";
+import { InputSelectComponent } from "./input-select.component";
+import { Placement } from "@floating-ui/dom";
+
+export type DefaultModelOptions = { value: string, label: string };
+
+export enum SelectInterfaces    {
+  /** Interface padrão do select 
+   * Popover quando web, Modal quando mobile
+   */
+  Dynamic     = 0,
+  Popover     = 0,
+  Modal       = 1,
+  ActionSheet = 2,
+} 
+
+export class InputSelectConfiguration{
+ 
+  static Create(options: {
+    bindLabel: string | ((obj: any) => string),
+    bindValue: string | ((obj: any) => any),
+    clearable?: boolean,
+    searcheable?: boolean,
+    loadFrom?: HttpService | Observable<ViewRetorno> | any[],
+    multiple?: boolean,
+    vFiltros?: Partial<{ 
+      search: string,
+      orderByProperty: string,
+      ascending: boolean,
+      filter: Comparison[]
+    }>,
+    disableConditional?: ((obj: any) => boolean)
+    useInfiniteScroll?: boolean | undefined,
+    placeholder?: string,
+    noItensFoundText?: string,
+    interface?: SelectInterfaces,
+    hasAtivo?: boolean;
+  }
+  ){
+    const config = new InputSelectConfiguration(
+      options.bindValue,
+      options.bindLabel,
+      options.clearable,
+      options.searcheable,
+      options.loadFrom,
+      options.multiple,
+      options.vFiltros || null,
+      options.disableConditional || null,
+      options.hasAtivo
+    );
+    if(options.placeholder){
+      config.placeholder = options.placeholder;
+    }
+    if(options.noItensFoundText){
+      config.noItensFoundText = options.noItensFoundText;
+    }
+    if(options.useInfiniteScroll != undefined){
+      config.useInfiniteScroll = options.useInfiniteScroll;
+    }
+    if(options.interface){
+      config.interface = options.interface;
+    }
+    config.hasAtivo = options.hasAtivo ?? false;
+    return config;
+  };
+
+
+  placeholder     : string = "Selecione um item..."
+  noItensFoundText: string = "Sem items encontrados..."
+
+  loader: InputSelectDataLoader;
+  loadFromArray   : any[];
+  loadFromService : HttpService | HttpServiceAtivo
+  loadFromFunction: Observable<any>
+
+  popoverConfiguration: {
+    flip: boolean,
+    placement: Placement,
+  } = {
+    flip: true,
+    placement: "bottom"
+  }
+
+  public vFiltros: ViewFiltros | null = null;
+  public useInfiniteScroll?: boolean | undefined = undefined;
+
+  /** Interface do select */
+  public interface: SelectInterfaces = SelectInterfaces.Dynamic;
+
+  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 Observable       -> Os dados serão carregados da função indicada
+     * Se LoadFrom instanceof Array            -> Os dados serão o array
+     */
+    public loadFrom?:  HttpService | 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,
+    /** Habilita o filtro de somente ativos */
+    public hasAtivo: boolean = false
+  ){
+    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.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{
+  private lstComponents: InputSelectComponent[] = [];
+  private 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 AddComponent(component: InputSelectComponent): void { 
+    this.lstComponents.push(component);
+  }
+
+  //TODO Remove function
+   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);
+  }
+
+  isLoaded: boolean = false;
+  error   : boolean = false;
+
+  async Refresh(items?: any[]): Promise<void>{
+    for (const component of this.lstComponents) {
+      component.loadingFromLoader = true;
+    }
+    
+    if(!this.configuration.loadFromService  && 
+       !this.configuration.loadFromFunction && 
+       (!this.configuration.loadFromArray || !this.configuration.loadFromArray.length)
+      ){
+      this.items = [...items || []];
+      this.isLoaded = true;
+      for (const component of this.lstComponents) {
+        if(!component.destroyed)
+        component.items.set([...this.items]); 
+          this.CheckForInfiniteScroll();
+      }
+    }
+    
+    try{
+      await this.Load();
+      this.isLoaded = true;
+      for (const component of this.lstComponents) {
+        if(!component.destroyed)
+        component.items.set([...this.items]);
+      }
+    }
+    finally{
+      for (const component of this.lstComponents) {
+        component.loadingFromLoader = false;
+      }
+    }
+  }
+
+  CheckForInfiniteScroll(): void {
+    if(this.items.length > 100 && this.configuration.useInfiniteScroll == undefined){
+      this.configuration.useInfiniteScroll = true;
+    }
+  }
+
+  items: any[] = [];
+  async Load(): Promise<void>{
+    if(this.isLoaded){
+      for (const component of this.lstComponents) {
+       if(!component.destroyed)
+        component.items.set([...this.items]); 
+        this.CheckForInfiniteScroll();
+      }
+
+      return;
+    }
+
+    //[ Load from Array ]
+    if(this.configuration.loadFromArray != undefined && this.configuration.loadFromArray.length){
+      this.items = [...this.configuration.loadFromArray];
+      for (const component of this.lstComponents) {
+       if(!component.destroyed)
+        component.items.set([...this.items]); 
+        this.CheckForInfiniteScroll();
+      }
+      return;
+    }
+
+    //[ Load from api ]
+    let vFiltros: ViewFiltros | null = this.configuration.vFiltros;
+    try{
+      let 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;
+      for (const component of this.lstComponents) {
+        if(!component.destroyed)
+        component.items.set([...this.items]); 
+          this.CheckForInfiniteScroll();}
+      ;
+      this.error = false;
+    }
+    catch (e){ this.error = true; throw e; }
+  }
+}
+
+export function BindValueFactory(configuration: InputSelectConfiguration): ((obj: any) => any) {
+  const cBindValue = configuration.bindValue;
+  let bindValue: ((args: any) => any) = null;
+  if(typeof(cBindValue) == 'string'){
+    let bvS: string               = cBindValue;
+    bindValue = ((obj: any): any => { return obj[bvS]; });
+  }else{
+    let 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;
+  let bindLabel: ((args: any) => string) = null;
+  if(typeof(cBindLabel) == 'string'){
+    let blS: string               = cBindLabel;
+    bindLabel = ((obj: any): string => { return obj[blS] + ''; });
+  }else{
+    let 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,27 @@
+<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]="value()" 
+    [type]="configuration().type" 
+    (ngModelChange)="SetValue($event)"
+    [disabled]="disabled() || loading()"
+    [maxlength]="configuration().maxlength"
+    (blur)="blur.emit($event)"
+  />
+  <div class="loading-container" [class.loading]="loading()">
+    <ion-spinner></ion-spinner>
+  </div>
+</div>

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

@@ -0,0 +1,31 @@
+import { Component, ElementRef, forwardRef, input, InputSignal, OnInit, ViewChild } from '@angular/core';
+import { CustomInput } from '../custom-input';
+import { InputProviderFactory } from '../input-provider-factory';
+import { InputStringConfiguration } from './input-string.configuration';
+
+@Component({
+  selector: 'input-string',
+  templateUrl: './input-string.component.html',
+  styleUrls: ['./input-string.component.scss', '../inputs.scss'],
+  providers: [
+    ...InputProviderFactory.GetProviders(InputStringComponent),
+    { provide: CustomInput, useExisting: forwardRef(() => InputStringComponent) },
+  ],
+})
+export class InputStringComponent extends CustomInput<string> {
+  
+  configuration: InputSignal<InputStringConfiguration> = input<InputStringConfiguration>(new InputStringConfiguration());
+
+  @ViewChild('input') input: ElementRef<HTMLInputElement>;
+  @ViewChild('inputContainer') inputContainer: ElementRef<HTMLDivElement>;
+  override setFocus(event: MouseEvent | null = null): void {
+    if(this.input && (event == null || event.target == this.inputContainer.nativeElement)) { this.input.nativeElement.focus(); }      
+  }
+
+  constructor() { super(); }
+
+  override writeValue(obj: string): void | Promise<void> {
+    this.value.set(obj);
+    this.runValidation();
+  }
+}

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

@@ -0,0 +1,20 @@
+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;
+  autoGrow: boolean = false;
+  constructor(type: InputStringType = InputStringType.Text, maxlength: number = 255, autoGrow = false){
+    this.type      = type; 
+    this.maxlength = maxlength;
+    this.autoGrow  = autoGrow;
+  }
+}

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

@@ -0,0 +1,29 @@
+<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
+    (focus)="!value() ? SetValue('+55') : null"
+    [ngModel]="value()" 
+    [maskito]="mask"
+    inputmode="numeric"
+    [type]="'text'" 
+    (ngModelChange)="SetValue($event)"
+    [disabled]="disabled() || loading()"
+    (blur)="blur.emit($event)"
+  />
+  <div class="loading-container" [class.loading]="loading()">
+    <ion-spinner></ion-spinner>
+  </div>
+</div>

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

@@ -0,0 +1,63 @@
+import { Component, ElementRef, forwardRef, model, ModelSignal, OnInit, ViewChild } from '@angular/core';
+import { MaskitoMaskExpression, MaskitoOptions, maskitoTransform } from '@maskito/core';
+import { maskitoPhoneOptionsGenerator } from '@maskito/phone';
+import metadata from 'libphonenumber-js/min/metadata';
+
+import { InputTelefoneCelularConfiguration } from './input-telefone.configuration';
+import { InputProviderFactory } from '../input-provider-factory';
+import { TelefoneCelular } from './input-telefone.configuration';
+import { CustomInput } from '../custom-input';
+
+@Component({
+  selector: 'input-telefone, input-celular, input-telefone-celular',
+  templateUrl: './input-telefone.component.html',
+  styleUrls: ['./input-telefone.component.scss', '../inputs.scss'],
+  providers: [
+    ...InputProviderFactory.GetProviders(InputTelefoneComponent),
+    { provide: CustomInput, useExisting: forwardRef(() => InputTelefoneComponent) },
+  ],
+})
+export class InputTelefoneComponent extends CustomInput<string> {
+  configuration: ModelSignal<InputTelefoneCelularConfiguration> = model<InputTelefoneCelularConfiguration>(new InputTelefoneCelularConfiguration());
+
+  @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(); }      
+  }
+
+  constructor(
+    protected override elementRef: ElementRef<HTMLInputElement>
+  ) { 
+    super(); 
+    if(this.elementRef.nativeElement.tagName.toLowerCase() == 'input-cpf-cnpj'){
+      this.configuration.set(new InputTelefoneCelularConfiguration());
+    }else{
+      const selector: string = this.elementRef.nativeElement.tagName.toLowerCase().split('-')[1];
+      if(selector == 'celular' ){ this.configuration.set(new InputTelefoneCelularConfiguration(TelefoneCelular.Cel))  } else
+      if(selector == 'telefone'){ this.configuration.set(new InputTelefoneCelularConfiguration(TelefoneCelular.TelCel)) } 
+    }
+    this.value.set('+55');
+  }
+
+  override writeValue(obj: string): void | Promise<void> {
+    this.value.set(obj);
+    this.runValidation();
+  }
+
+  override SetValue(obj: string): void {
+    this.value.set(obj);
+    this.runValidation();
+    this.propagateChange(obj.replaceAll('.', '').replaceAll('-', '').replaceAll(' ', ''));
+  }
+
+  readonly mask: MaskitoOptions = mask;
+}
+const mask: MaskitoOptions = maskitoPhoneOptionsGenerator({
+  metadata,
+  strict: false,
+  countryIsoCode: 'BR',
+});
+export function FormatTelefoneCelular(value: string): string {
+  return maskitoTransform(value, mask);
+}

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

@@ -0,0 +1,8 @@
+export enum TelefoneCelular {
+  'Tel' = 'Tel',
+  'Cel' = 'Cel',
+  'TelCel' = 'TelCel',
+} 
+export class InputTelefoneCelularConfiguration {
+  constructor(public type: TelefoneCelular = TelefoneCelular.TelCel){}
+}

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

@@ -0,0 +1,27 @@
+<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>
+  <textarea #textarea
+    [ngModel]="value()" 
+    (ngModelChange)="SetValue($event)"
+    [disabled]="disabled() || loading()"
+    [maxlength]="configuration().maxlength"
+    (blur)="blur.emit($event)"
+  >
+  </textarea>
+  <div class="loading-container" [class.loading]="loading()">
+    <ion-spinner></ion-spinner>
+  </div>
+</div>

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

@@ -0,0 +1,75 @@
+import { Component, ElementRef, forwardRef, HostListener, input, InputSignal, ViewChild } from '@angular/core';
+import { InputTextAreaConfiguration } from './input-textarea.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.GetProviders(InputTextareaComponent),
+    { provide: CustomInput, useExisting: forwardRef(() => InputTextareaComponent) },
+  ],
+})
+export class InputTextareaComponent extends CustomInput<string> {
+
+  configuration: InputSignal<InputTextAreaConfiguration> = input<InputTextAreaConfiguration>(new InputTextAreaConfiguration());
+
+  @ViewChild('textarea') input: ElementRef<HTMLTextAreaElement>;
+  @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(); }      
+  }
+
+  constructor() { super(); }
+
+  private resize(): void {
+    if (!this.configuration().autoGrow) return;
+
+    const textarea = this.input?.nativeElement;
+    if (!textarea) return;
+
+    const selectionStart = textarea.selectionStart;
+    const selectionEnd = textarea.selectionEnd;
+
+    // bloqueia rolagem do container pai temporariamente
+    const scrollParent = this.EncontraScroll(textarea);
+    const prevScroll = scrollParent ? scrollParent.scrollTop : 0;
+
+    // recalcula altura
+    textarea.style.overflow = 'hidden';
+    textarea.style.height = 'auto';
+    textarea.style.height = `${textarea.scrollHeight}px`;
+
+    // restaura posição do scroll do container
+    if (scrollParent) scrollParent.scrollTop = prevScroll;
+
+    // mantém posição do cursor sem chamar focus()
+    textarea.setSelectionRange(selectionStart, selectionEnd);
+  }
+
+  // Encontra o container com scroll (ex: ion-content, div com overflow)
+  private EncontraScroll(el: HTMLElement): HTMLElement | null {
+    let parent = el.parentElement;
+    while (parent) {
+      const style = getComputedStyle(parent);
+      if (/(auto|scroll)/.test(style.overflowY)) return parent;
+      parent = parent.parentElement;
+    }
+    return null;
+  }
+
+  @HostListener('input')
+  onInput(): void {
+    if (this.configuration().autoGrow) {
+      requestAnimationFrame(() => this.resize());
+    }
+  }
+
+  override writeValue(obj: string): void | Promise<void> {
+    this.value.set(obj);
+    this.runValidation();
+    requestAnimationFrame(() => this.resize());
+  }  
+}

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

@@ -0,0 +1,7 @@
+import { InputStringConfiguration, InputStringType } from "../input-string/input-string.configuration";
+
+export class InputTextAreaConfiguration extends InputStringConfiguration{
+  constructor(maxlength: number = 2000, autoGrow: boolean = false){
+    super(InputStringType.Text, maxlength, autoGrow);
+  }
+}

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

@@ -0,0 +1,22 @@
+export enum InputType {
+  Bool     = "Bool",
+  Cep      = "Cep",
+  Color    = "Color",
+  CpfCnpj  = "CpfCnpj",
+  Cpf      = "Cpf",
+  Cnpj     = "Cnpj",
+  Date     = "Date",
+  DateTime = "DateTime",
+  Time     = "Time",
+  Decimal  = "Decimal",
+  Currency = "Currency",
+  Number   = "Number",
+  File     = "File",
+  Icon     = "Icon",
+  Select   = "Select",
+  String   = "String",
+  TelefoneCelular = "TelefoneCelular",
+  Telefone = "Telefone",
+  Celular = "Celular",
+  TextArea = "TextArea",
+}