@sapphire-ion/framework 1.2.62 → 1.3.1

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

@@ -0,0 +1,99 @@
+import { Component, ElementRef, forwardRef, model, ModelSignal, ViewChild } from '@angular/core';
+import { MaskitoMaskExpression, MaskitoOptions, maskitoTransform } from '@maskito/core';
+import { CustomInput } from '../custom-input';
+import { InputCpfCnpjConfiguration } from './input-cpf-cnpj.configuration';
+import { InputProviderFactory } from '../input-provider-factory';
+
+@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.GetProviders(InputCpfCnpjComponent),
+    { provide: CustomInput, useExisting: forwardRef(() => InputCpfCnpjComponent) },
+  ],
+})
+export class InputCpfCnpjComponent extends CustomInput<string> {
+
+  configuration: ModelSignal<InputCpfCnpjConfiguration> = model<InputCpfCnpjConfiguration>(new InputCpfCnpjConfiguration());
+
+  @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 InputCpfCnpjConfiguration());
+    }else{
+      const selector: string = this.elementRef.nativeElement.tagName.toLowerCase().split('-')[1];
+      if(selector == 'cpf' ){ this.configuration.set(new InputCpfCnpjConfiguration('CPF'))  } else
+      if(selector == 'cnpj'){ this.configuration.set(new InputCpfCnpjConfiguration('CNPJ')) } 
+    }
+  }
+
+  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: (elementState) => {
+      if(this.configuration().type == 'CPFCNPJ'){
+        if(!elementState.value){ 
+          return cpfMask;
+        }else{
+          if(elementState.value.includes('.')){
+            if(elementState.value.length <= 14) { 
+              return cpfMask; 
+            }
+            return cnpjMask;
+          }else{
+            if(elementState.value.length <= 11) { 
+              return cpfMask; 
+            }
+            return cnpjMask;
+          }
+        }
+      }
+      if(this.configuration().type == 'CNPJ'){ return cnpjMask; }
+      if(this.configuration().type == 'CPF' ){ return cpfMask;  }
+    },
+  };
+}
+
+const cpfMask : MaskitoMaskExpression = [ /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '-', /\d/, /\d/  ];
+const cnpjMask: MaskitoMaskExpression = [ /\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/];
+const cpfCnpjMask: MaskitoOptions = {
+  mask: (elementState) => {
+    if(!elementState.value){ 
+      return cpfMask;
+    }else{
+      if(elementState.value.includes('.')){
+        if(elementState.value.length <= 14) { 
+          return cpfMask; 
+        }
+        return cnpjMask;
+      }else{
+        if(elementState.value.length <= 11) { 
+          return cpfMask; 
+        }
+        return cnpjMask;
+      }
+    }
+  }
+}
+export function FormatCpfCnpj(value: string): string {
+  return maskitoTransform(value, cpfCnpjMask);
+}

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

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

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

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

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

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

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

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

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

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