@sapphire-ion/framework 1.2.62 → 1.3.1

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

@@ -0,0 +1,111 @@
+import { AbstractControl } from "@angular/forms";
+import {
+  isPossiblePhoneNumber,
+} from 'libphonenumber-js'
+
+export class ControlError {
+  constructor(public message: string){}
+}
+
+export class FormValidators{
+  static readonly CPFError    : ControlError = new ControlError("CPF incompleto");
+  static readonly CnpjError   : ControlError = new ControlError("CNPJ incompleto");
+  static readonly CPFCnpjError: ControlError = new ControlError("CPF / CNPJ incompleto");
+  static CPFValidator(control: AbstractControl): ControlError | null {
+    if(control.value != null){
+      if(control.value.length != 11){ return FormValidators.CPFError; }
+      return null;
+    }
+    return FormValidators.CPFError;
+  } 
+  static CnpjValidator(control: AbstractControl): ControlError | null {
+    if(control.value != null){
+      if(control.value.length != 14){ return FormValidators.CnpjError; }
+      return null;
+    }
+    return FormValidators.CnpjError;
+  } 
+  static CPFCpnjValidator(control: AbstractControl): ControlError | null {
+    if(control.value != null){
+      if(control.value.length < 11){
+        return FormValidators.CPFError;
+      }else
+      if(control.value.length > 11 && control.value.length != 14){  
+        return FormValidators.CnpjError;
+      }
+      return null;
+    }
+    return null;
+  } 
+
+  static readonly TelefoneError: ControlError = new ControlError("Telefone invalido");
+  static TelefoneValidator(control: AbstractControl): ControlError | null {
+    if(control.value != null){
+      if(control.value.length != 12){
+        return FormValidators.TelefoneError;
+      }
+      return null;
+    }
+    return null;
+  } 
+  static readonly CelularError: ControlError = new ControlError("Celular invalido");
+  static CelularValidator(control: AbstractControl): ControlError | null {
+    if(control.value != null){
+      if(control.value.length != 13){
+        return FormValidators.CelularError;
+      }
+      return null;
+    }
+    return null;
+  } 
+  static readonly TelefoneCelularError: ControlError = new ControlError("Telefone / Celular inválido");
+  static TelefoneCelularValidator(control: AbstractControl): ControlError | null {
+    if(control.value != null){
+      if(!(isPossiblePhoneNumber(control.value))){
+        return FormValidators.TelefoneCelularError;
+      }
+      return null;
+    }
+    return null;
+  } 
+
+
+  static readonly PositiveNonZeroNumberError: ControlError = new ControlError("%fieldName% deve ser maior que 0!");
+  static PositiveNonZeroNumberValidator(fieldName: string): (control: AbstractControl) => ControlError | null {
+    return ((control: AbstractControl): ControlError | null => {
+      const Error = FormValidators.PositiveNonZeroNumberError.message.replace("%fieldName%", fieldName);
+      if(control.value != null){
+        if(control.value <= 0){ return new ControlError(Error); }
+        return null;
+      }
+      return new ControlError(Error);;
+    })
+  }
+
+  static readonly PositiveNumberError: ControlError = new ControlError("%fieldName% deve ser maior ou igual que 0!");
+  static PositiveNumberValidator(fieldName: string): (control: AbstractControl) => ControlError | null {
+    return ((control: AbstractControl): ControlError | null => {
+      const Error = FormValidators.PositiveNumberError.message.replace("%fieldName%", fieldName);
+      if(control.value != null){
+        if(control.value < 0){ return new ControlError(Error); }
+        return null;
+      }
+      return new ControlError(Error); 
+    })
+  }
+
+  static readonly ValueBetweenError = new ControlError("%fieldName% deve ser maior ou igual a %min% e menor ou igual a %max%");
+  static ValueBetweenValidator(min: number, max: number, fieldName: string, equalMin: boolean = true, equalMax: boolean = true): (control: AbstractControl) => ControlError | null {
+    return ((control: AbstractControl): ControlError | null => {
+      const Error = FormValidators.ValueBetweenError.message.replace("%fieldName%", fieldName).replace("%min%", min.toString()).replace("%max%", max.toString());
+      if(control.value != null){
+        if(control.value < min && equalMin){ return new ControlError(Error); }else
+        if(control.value > max && equalMax){ return new ControlError(Error); }else
+        if(control.value <= min && !equalMin){ return new ControlError(Error); }else
+        if(control.value >= max && !equalMax){ return new ControlError(Error); }
+        return null;
+      }
+      return new ControlError(Error); 
+    });
+  }
+}

package/src/lib/components/inputs/inputs.module.ts

@@ -0,0 +1,74 @@
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MaskitoDirective } from '@maskito/angular';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { NgModule } from '@angular/core';
+
+import { InputTextareaComponent } from './input-textarea/input-textarea.component';
+import { InputStringComponent } from './input-string/input-string.component';
+import { InputDecimalComponent } from './input-decimal/input-decimal.component';
+import { InputBoolComponent } from './input-bool/input-bool.component';
+import { InputFileComponent } from './input-file/input-file.component';
+import { ImageComponent } from '../image/image.component';
+import { InputDateComponent } from './input-date/input-date.component';
+import { InputSelectComponent } from './input-select/input-select.component';
+import { SIonPopoverModule } from '../popover/sion-popover.module';
+import { SIonLabelTemplateDirective } from './input-select/directives/sion-label-template.directive';
+import { SIonOptionTemplateDirective } from './input-select/directives/sion-option-template.directive';
+import { SIonPlaceholderTemplateDirective } from './input-select/directives/sion-placeholder-template.directive';
+import { InputCpfCnpjComponent } from './input-cpf-cnpj/input-cpf-cnpj.component';
+import { DownloadButtonComponent } from './input-file/download-button/download-button.component';
+import { LoadingComponent } from '../loading/loading.component';
+import { NgVarDirective } from '../../directives/ng-var.directive';
+import { InputColorComponent } from './input-color/input-color.component';
+import { InputCepComponent } from './input-cep/input-cep.component';
+import { InputTelefoneComponent } from './input-telefone/input-telefone.component';
+import { InputIconComponent } from './input-icon/input-icon.component';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
+import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-adapter';
+import { MatCardModule } from '@angular/material/card';
+
+const lstComponents = [
+  InputBoolComponent,
+  InputCepComponent,
+  InputColorComponent,
+  InputCpfCnpjComponent,
+  InputDateComponent,
+  InputDecimalComponent,
+  InputFileComponent,
+  InputIconComponent,
+  InputSelectComponent,
+    SIonLabelTemplateDirective,
+    SIonOptionTemplateDirective,
+    SIonPlaceholderTemplateDirective,
+  InputStringComponent,
+  InputTelefoneComponent,
+  InputTextareaComponent,
+  DownloadButtonComponent,
+]
+
+@NgModule({
+  declarations: [ ...lstComponents ],
+  exports     : [ ...lstComponents ],
+  imports: [
+    IonicModule,
+    CommonModule,
+    ReactiveFormsModule,
+    FormsModule,
+    ImageComponent,
+    MaskitoDirective,
+    SIonPopoverModule,
+    LoadingComponent,
+    NgVarDirective,
+    OverlayModule,
+    MatDatepickerModule,
+    MatCardModule
+  ],
+  providers: [
+    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
+    {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS},
+  ]
+})
+export class InputsModule { }

package/src/lib/components/loading/loading.component.html

@@ -0,0 +1,28 @@
+@switch (type) {
+  @case (1) {
+    <div class="w-full text-center h-16 flex items-center justify-center">
+      <div class="flex items-center justify-center">
+        <ion-spinner></ion-spinner>
+      </div>
+      @if(text){
+        <span>{{text}}</span>
+      }
+    </div>
+  }
+  @case (2) {
+    <div class="w-full text-center h-16 flex items-center justify-center">
+      <div class="flex items-center justify-center">
+        <ion-spinner></ion-spinner> 
+        @if (text) {
+          <span class="ml-3">{{text}}</span>
+        }
+      </div>
+    </div>
+  }
+  @case (3) {
+    <div class="absolute top-0 left-0 size-full opacity-0 -z-50 default-transition -translate-y-12 flex items-center justify-center !translucid-background" 
+      [ngClass]="{'!z-20 !opacity-100 !translate-y-0': loading}">
+      <loading [type]="2" [text]="text"></loading>   
+    </div>
+  }
+}

package/src/lib/components/loading/loading.component.ts

@@ -0,0 +1,29 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+
+@Component({
+  standalone: true,
+  imports: [ CommonModule, IonicModule ],
+  selector: 'loading',
+  templateUrl: './loading.component.html',
+  styleUrls: ['./loading.component.scss'],
+})
+export class LoadingComponent  implements OnInit {
+
+  /** Texto exibido */
+  @Input() text    : string = "Carregando, por favor aguarde...";
+  /** Tipo do loading
+   *  1 - Componente basico - h-16 de altura 
+   *  2 - Componente basico - h-16 de altura 
+   *  3 - Componente absoluto, preenche o elemento superior relativo
+   */
+  @Input() type    : 1 | 2 | 3 = 1;
+  /** Utilizado no tipo 3, quando inativo é hidden */
+  @Input() loading : boolean = true;
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

package/src/lib/components/login/login-admin/login-admin.component.html

@@ -0,0 +1,28 @@
+@if (this.authService.isAdmin || !this.apiUrlProviderService.production) {
+  <ion-button (click)="adminPopover.present($event)" fill="outline" class="aspect-square h-8 z-50" size="small">
+    <ion-icon name="shield" slot="icon-only"></ion-icon>
+  </ion-button>
+  <ion-popover id="admin-popover" #adminPopover>
+    <ng-template>
+      <ion-content class="p-2 bg-transparent">
+      <div class="p-2">
+        <input-select
+          [(ngModel)]="idUsuario"
+          label="Logar como..."
+          (change)="SelectUser($event)"
+          [configuration]="selectUserConfiguration"
+        ></input-select>
+  
+        <div class="rounded-2xl mt-2 overflow-hidden border border-primary/30">
+          <div class="py-2 text-center border-b border-b-medium/30">
+            <span class="font-poppins"> API </span>
+          </div>
+          <ion-item lines="none" style="--border-width: 0 !important;">
+            <ion-input [(ngModel)]="apiUrl" (ngModelChange)="SetApiUrl()"></ion-input>
+          </ion-item>
+        </div>
+      </div>
+      </ion-content>
+    </ng-template>
+  </ion-popover>
+}

package/src/lib/components/login/login-admin/login-admin.component.ts

@@ -0,0 +1,51 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+
+import { ApiUrlProviderService } from '../../../services/web/api-url-provider.service';
+import { UsuarioService        } from '../../../services/usuario.service';
+import { AuthService           } from '../../../services/auth.service';
+
+import { InputsModule             } from '../../../components/inputs/inputs.module';
+import { InputSelectConfiguration } from '../../../components/inputs/input-select/input.select.configuration';
+
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    IonicModule,
+    FormsModule,
+    ReactiveFormsModule,
+    InputsModule
+  ],
+  selector: 'login-admin',
+  templateUrl: './login-admin.component.html',
+  styleUrls: ['./login-admin.component.scss'],
+})
+export class LoginAdminComponent  implements OnInit {
+
+  constructor(
+    public apiUrlProviderService: ApiUrlProviderService,
+    public authService: AuthService,
+    private usuarioService: UsuarioService,
+  ) { }
+
+  idUsuario: number | null;
+
+  async ngOnInit() {
+    try{
+      this.idUsuario = (await this.authService.LoadToken()).id;
+    }catch{}
+  }
+
+  public selectUserConfiguration: InputSelectConfiguration = new InputSelectConfiguration('id', ((v) => { return v.nome + ' - ' + v.apelido; }), false, true, this.usuarioService);
+  SelectUser(event: number){
+    if(event){ this.authService.BypassLogin(event).then(() => window.location.reload() ) }
+  }
+
+  apiUrl: string = this.apiUrlProviderService.apiUrl;
+  SetApiUrl(){
+    this.apiUrlProviderService.apiUrl = this.apiUrl;
+  }
+}

package/src/lib/components/login/login.component.html

@@ -0,0 +1,104 @@
+<!-- <div class="size-full flex justify-center items-center relative">
+  <div class="landscape:w-4/5 portrait:w-full landscape:h-2/3 portrait:h-full landscape:max-w-[60rem] translucid-border landscape:rounded-3xl landscape:backdrop-blur-xl overflow-hidden">
+    <div class="size-full flex portrait:flex-col" style="background-color: color-mix(in srgb, var(--ion-color-light) 20%, transparent 80%);">
+      <div class="shrink-0 w-96 portrait:w-full portrait:h-32 h-full p-3">
+        <div class="rounded-2xl size-full overflow-x-hidden">
+          <ng-content class="size-full"></ng-content>
+        </div>
+      </div>
+      <div class="grow flex items-center justify-center h-full py-3 pr-3 portrait:pl-3">
+        <div class="w-96 h-full flex flex-col items-center justify-center gap-2" *ngIf="frm" [formGroup]="frm">
+
+          <ion-text class="text-5xl my-10 portrait:mt-[-5rem]"> Login </ion-text>
+
+          <ion-card class="w-full backdrop-blur-xl">
+            <ion-card-content>
+              <ion-item lines="none" label="Senha" labelPlacement="stacked" class="rounded-2xl my-3 w-full">
+                <ion-icon name="person" slot="start"></ion-icon>
+                <ion-input placeholder="Usuário / User" formControlName="apelido"></ion-input>
+              </ion-item>
+            </ion-card-content>
+          </ion-card>
+
+          <ion-card class="w-full backdrop-blur-xl"> 
+            <ion-card-content>
+              <ion-item lines="none" class="rounded-2xl my-3 w-full">
+                <ion-icon name="lock-closed" slot="start"></ion-icon>
+                <ion-input type="password" formControlName="senha" placeholder="Senha / Password">
+                  <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+                </ion-input>
+              </ion-item>
+            </ion-card-content>
+          </ion-card>
+
+          <div class="w-full">
+            <a href="">Esqueceu a senha?</a>
+          </div>
+
+          <div class="flex w-full">
+            <ion-button class="rounded-2xl shadow-xl default-transition w-full" expand="block" (click)="Login()" [disabled]="loading">
+              <ion-spinner class="default-transition" [ngClass]="{'-translate-x-12 opacity-0 size-0': !loading, 'mr-2' : loading}" slot="start"></ion-spinner>
+              <ion-icon    class="default-transition" [ngClass]="{'-translate-x-12 opacity-0 size-0':  loading}" name="enter-outline" slot="start" ></ion-icon>
+              <span class="default-transition" > Login </span>
+            </ion-button>
+
+            <ion-button class="shrink-0 aspect-square ml-3" color="dark" hidden>
+              <svg class="size-8" slot="icon-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="64" height="64"><defs><path id="A" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/></defs><clipPath id="B"><use xlink:href="#A"/></clipPath><g transform="matrix(.727273 0 0 .727273 -.954545 -1.45455)"><path d="M0 37V11l17 13z" clip-path="url(#B)" fill="#fbbc05"/><path d="M0 11l17 13 7-6.1L48 14V0H0z" clip-path="url(#B)" fill="#ea4335"/><path d="M0 37l30-23 7.9 1L48 0v48H0z" clip-path="url(#B)" fill="#34a853"/><path d="M48 48L17 24l-4-3 35-10z" clip-path="url(#B)" fill="#4285f4"/></g></svg>
+            </ion-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div> -->
+
+<div #loginContainer class="size-full flex justify-center items-center relative portrait:p-4">
+  <div class="landscape:w-4/5 landscape:h-2/3 landscape:xl:max-w-[60rem] portrait:size-full translucid-border backdrop-blur-xl rounded-3xl overflow-hidden">
+    <div class="size-full flex portrait:flex-col" style="background-color: color-mix(in srgb, var(--ion-color-light) 20%, transparent 80%);">
+      <div class="shrink-0 w-96 portrait:w-full portrait:h-40 landscape:h-full p-2">
+        <div class="size-full rounded-2xl overflow-hidden">
+          <ng-content select="[slot=logo]" class="size-full"></ng-content>
+        </div>
+      </div>
+      <div class="shrink size-full flex flex-col items-center justify-center gap-3 px-10 relative" *ngIf="frm" [formGroup]="frm">
+        <ion-text class="h-24 text-5xl"> Login </ion-text>
+
+        <ion-card class="w-full backdrop-blur-xl">
+          <ion-card-content>
+            <ion-item lines="none" label="Senha" labelPlacement="stacked" class="rounded-2xl my-3 w-full">
+              <ion-icon name="person" slot="start"></ion-icon>
+              <ion-input placeholder="Usuário / User" formControlName="apelido" (keydown.enter)="Login()"></ion-input>
+            </ion-item>
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card class="w-full backdrop-blur-xl"> 
+          <ion-card-content>
+            <ion-item lines="none" class="rounded-2xl my-3 w-full">
+              <ion-icon name="lock-closed" slot="start"></ion-icon>
+              <ion-input type="password" formControlName="senha" placeholder="Senha / Password" (keydown.enter)="Login()">
+                <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+              </ion-input>
+            </ion-item>
+          </ion-card-content>
+        </ion-card>
+
+        <div class="flex w-full">
+          <ion-button class="transition-all rounded-2xl shadow-xl default-transition w-full" expand="block" (click)="Login()" [disabled]="loading">
+            <ion-spinner class="default-transition" [ngClass]="{'-translate-x-12 opacity-0 size-0': !loading, 'mr-2' : loading}" slot="start"></ion-spinner>
+            <ion-icon    class="default-transition" [ngClass]="{'-translate-x-12 opacity-0 size-0':  loading}" name="enter-outline" slot="start" ></ion-icon>
+            <span class="default-transition"> Login </span>
+          </ion-button>
+
+          <!-- <ion-button class="shrink-0 aspect-square ml-3" color="dark" hidden>
+            <svg class="size-8" slot="icon-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="64" height="64"><defs><path id="A" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/></defs><clipPath id="B"><use xlink:href="#A"/></clipPath><g transform="matrix(.727273 0 0 .727273 -.954545 -1.45455)"><path d="M0 37V11l17 13z" clip-path="url(#B)" fill="#fbbc05"/><path d="M0 11l17 13 7-6.1L48 14V0H0z" clip-path="url(#B)" fill="#ea4335"/><path d="M0 37l30-23 7.9 1L48 0v48H0z" clip-path="url(#B)" fill="#34a853"/><path d="M48 48L17 24l-4-3 35-10z" clip-path="url(#B)" fill="#4285f4"/></g></svg>
+          </ion-button> -->
+        </div>
+
+        <div class="w-full">
+          <ng-content select="[slot=end]"></ng-content>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/lib/components/login/login.component.ts

@@ -0,0 +1,96 @@
+import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Component, EventEmitter, HostListener, OnInit, Output, ViewChild } from '@angular/core';
+import { IonicModule, NavController } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
+
+import { EnvironmentService } from '../../services/environment.service';
+import { ApiUrlProviderService } from '../../services/web/api-url-provider.service';
+import { GenericService } from '../../services/generic.service';
+import { AuthService } from '../../services/auth.service';
+
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    IonicModule,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
+  selector: 'login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss'],
+})
+export class DefaultLoginComponent  implements OnInit {
+
+  constructor(
+    private fb: FormBuilder,
+    private genericService: GenericService,
+    private navController: NavController,
+    private authService: AuthService,
+    public apiUrlProviderService: ApiUrlProviderService,
+    public coreService: EnvironmentService,
+    private router: Router
+  ) { 
+    this.genericService.SetTitle("Login");
+  }
+  
+  async ngOnInit() {
+    this.CreateForm();
+
+    if(!this.coreService.environment.production){
+      this.frm.patchValue(this.coreService.environment.defaultCredentials); 
+    }
+    const Token = await this.authService.LoadToken()
+    if(this.authService.isTokenValid(Token)){
+      this.router.navigate(["/"]);
+    }
+  }
+  
+  frm: FormGroup;
+  CreateForm(): void{
+    this.frm = this.fb.group({
+      apelido : [null ,Validators.required],
+      senha   : [null, Validators.required]
+    });
+  }
+
+  loading: boolean;
+  submitted: boolean = false;
+
+  @Output() OnLogin: EventEmitter<any> = new EventEmitter<any>();
+  @ViewChild('loginContainer') loginContainer: HTMLElement;
+
+  @HostListener('window:keydown', ['$event'])
+  async Login($event?: KeyboardEvent): Promise<void>{
+    if($event && $event.key != 'Enter'){ return; }
+    if($event && !this.loginContainer.contains(document.activeElement)){
+      return; // Prevent login if the active element is not within the login container
+    }
+
+    this.submitted = true;
+    this.loading   = true;
+   
+    if(!this.frm.valid){
+      this.loading = false;
+      this.genericService.PresentToast("Usuario / Senha não informado!"); return;
+    }
+
+    try{
+      const Token = await this.authService.Login(this.frm.value);
+
+      this.loading = false;
+      this.navController.navigateRoot("/");
+      this.genericService.PresentToast("Logado com sucesso!", "checkmark-circle");
+      this.OnLogin.emit(Token);
+    }
+    catch (status){
+      if(status == 401){
+        this.genericService.PresentToast("Usuário / Senha inválido (s)!");
+      }else{
+        this.genericService.PresentToast("Ocorreu um erro ao realizar o login!");
+      }
+      this.loading = false;
+    }
+  }
+}