@sapphire-ion/framework 0.30.26 → 0.30.28

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

@@ -0,0 +1,133 @@
+import { Component, effect, EventEmitter, Input, model, ModelSignal, Output } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import moment from 'moment';
+
+import { InputSelectConfiguration } from '../inputs/input-select/input.select.configuration';
+import { ComparisonValueType } from '../../classes/comparison/comparison-value-type';
+import { ComparisonOperator } from '../../classes/comparison/comparison-operator';
+import { InputsModule } from '../inputs/inputs.module';
+import { Comparison } from '../../classes/comparison/comparison';
+import { InputType } from '../inputs/input-type';
+import { Utils } from '../../services/utils.service';
+
+import { InputCurrencyConfiguration, InputDecimalConfiguration, InputNumberConfiguration } from '../inputs/input-decimal/input-decimal.configuration';
+import { InputStringConfiguration } from '../inputs/input-string/input-string.configuration';
+import { InputDateConfiguration } from '../inputs/input-date/input-date.configuration';
+import { InputFileConfiguration } from '../inputs/input-file/input-file.configuration';
+import { InputBoolConfiguration } from '../inputs/input-bool/input-bool.configuration';
+import { InputConfiguration } from '../inputs/input-configuration';
+
+/** Componente padrão de filtro */
+@Component({
+  standalone: true,
+  imports: [CommonModule, IonicModule, InputsModule, ReactiveFormsModule, FormsModule],
+  selector: 'filter',
+  templateUrl: './filter.component.html',
+  styleUrls: ['./filter.component.scss'],
+
+})
+export class FilterComponent {
+
+  /** Label do input */
+  @Input() label: string;
+  /** Filtro que sera utilizado na pesquisa (usando two way data binding) */
+  filter: ModelSignal<Comparison> = model<Comparison>();
+
+  /** Tipo de input do filtro */
+  @Input() type: InputType;
+  
+  guid: string = Utils.GenerateGUID();
+  
+  /** Configuração input do filtro */
+  _configuration: InputConfiguration | null = null;
+  configuration: ModelSignal<InputConfiguration | null> = model<InputConfiguration | null>(null);
+
+  constructor() { 
+    effect(() => {
+      if([InputType.Date, InputType.DateTime].includes(this.type)){ 
+        this.model = moment(this.filter().value).format("YYYY-MM-DDTHH:mm:ss");
+        this.filter().value = this.model;
+      }
+      this.SetConfiguration();
+    })
+  }
+
+  get index() { return this.filter().propertyName; }
+
+  SetConfiguration() {
+    if(!this.configuration()){
+      if([InputType.Date, InputType.DateTime, InputType.Time].includes(this.type)){ 
+                                           this._configuration = new InputDateConfiguration(true) } else
+      if(this.type == InputType.File    ){ this._configuration = new InputFileConfiguration()     } else
+      if(this.type == InputType.Number  ){ this._configuration = new InputNumberConfiguration()   } else
+      if(this.type == InputType.Decimal ){ this._configuration = new InputDecimalConfiguration()  } else
+      if(this.type == InputType.Currency){ this._configuration = new InputCurrencyConfiguration() } else
+      if(this.type == InputType.String  ){ this._configuration = new InputStringConfiguration()   } else
+      if(this.type == InputType.Select  ){ this._configuration = new InputSelectConfiguration()   } else
+      if(this.type == InputType.TextArea){ this._configuration = new InputStringConfiguration();  } else 
+      if(this.type == InputType.Bool    ){ this._configuration = new InputBoolConfiguration();    }
+    }
+
+    if(this.configuration() && this.configuration() instanceof InputSelectConfiguration){
+      this._configuration = new InputSelectConfiguration(
+        this.configuration().bindValue,
+        this.configuration().bindLabel,
+        true,
+        true,
+        this.configuration().loadFrom,
+        true,
+      );
+    }
+
+    if(this.configuration() instanceof InputDateConfiguration){
+      this._configuration = new InputDateConfiguration(true);
+    }
+
+    if(this.type == InputType.Bool){
+      if(this.index == "ativo"){
+        this._configuration = new InputSelectConfiguration('value', 'label', true, true, [
+          { label: 'Somente Ativos'    , value: true  },
+          { label: 'Somente Não Ativos', value: false },
+        ]);
+        this.model = true;
+      }
+      else{
+        this._configuration = new InputSelectConfiguration('value', 'label', true, false, [
+          { label: 'Sim', value: true  },
+          { label: 'Não', value: false },
+        ]);
+      }
+    }
+
+    if(!this._configuration){
+      this._configuration = this.configuration()
+    }
+  }
+
+  isFilterActive: boolean = false;
+
+  model: any | null = null;
+  /** Evento emitido quando o valor do filtro muda */
+  @Output('change') changeEmitter: EventEmitter<void> = new EventEmitter<void>();
+
+  Change(): void{
+    if(this.model){
+      if(this.type == InputType.Date && (
+          this.filter().operator == ComparisonOperator.LessThan || 
+          this.filter().operator == ComparisonOperator.LessThanOrEqual)
+        )
+      { 
+        this.model = this.FormatDateModel(moment(this.model).endOf("day").toISOString());
+      }
+    }
+    this.filter().value = this.model;
+    this.filter.set(this.filter());
+    this.changeEmitter.emit();
+  }
+
+  FormatDateModel(model: string): string{
+    return moment(model).format("YYYY-MM-DDTHH:mm:ss");
+  }
+}

package/src/lib/components/http-responses-pages/forbidden-403/forbidden-403.component.html

@@ -0,0 +1,35 @@
+<div class="bg-white size-full">
+  <div class="relative flex flex-col items-center justify-center min-h-screen overflow-hidden">
+    <div class="absolute inset-0 w-full h-full bg-gradient-to-br from-red-500 to-red-900 animate-gradient-fade"></div>
+  
+    <ion-card class="m-0 max-w-md">
+      <ion-card-content class="size-full bg-light/10 p-8 flex flex-col items-center justify-center text-center space-y-6">
+        <div class="p-3 rounded-full relative translucid-border">
+          <div class="size-12 flex items-center justify-center">
+            <ion-icon class="text-5xl text-white/70" name="shield-outline"></ion-icon>
+          </div>
+      
+      
+          <div class="absolute -inset-1 rounded-full bg-gradient-to-r from-rose-400 to-pink-500 opacity-25 blur-sm"></div>
+        </div>
+      
+        <ion-text class="text-4xl font-bold tracking-tight text-white/70">
+          Acesso Negado
+        </ion-text>
+      
+        <ion-text color="light" class="text-white/70">
+          Você não tem permissão para acessar este recurso. Por favor, entre em contato com o administrador se acreditar que isso é um erro.
+        </ion-text>
+      
+        <div class="flex flex-col sm:flex-row gap-4 mt-4">
+          <ion-button [routerLink]="['/']" color="danger" class="text-red-600 px-4 py-2 rounded-md font-medium">
+            <ion-icon name="chevron-back" slot="start"></ion-icon>
+            Retornar a navegação
+          </ion-button>
+        </div>
+  
+      </ion-card-content>
+    </ion-card>
+  </div>
+</div>
+  

package/src/lib/components/http-responses-pages/forbidden-403/forbidden-403.component.ts

@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { IonicModule } from '@ionic/angular';
+
+@Component({
+  selector: 'forbidden-403',
+  standalone: true,
+  imports: [CommonModule, IonicModule, RouterLink],
+  templateUrl: './forbidden-403.component.html',
+  styleUrls: ['./forbidden-403.component.scss'],
+})
+export class Forbidden403Component  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

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

@@ -0,0 +1,17 @@
+@if (!err && _src()) {
+    <div class="animated-from-top flex items-center justify-center relative overflow-hidden size-full {{ClassObject}} {{ClassFill}}" >
+        <loading class="!text-sm" [loading]="loading" [type]="3" text=""></loading>
+        <ion-img 
+            class="-translate-y-12 opacity-0 default-transition animated-from-top object-contain size-full" 
+            [ngClass]="{'opacity-100 translate-y-0': !loading }"
+            [src]="src() ? (_src() | secure | async) : null" 
+            (ionImgWillLoad)="loading = true"
+            (ionError)="loading = false; err = true"
+            (ionImgDidLoad)="loading = false;"
+        ></ion-img>
+    </div>
+}@else {
+    <div class="animated-from-top flex items-center justify-center size-full {{ClassObject}} {{ClassFill}}">
+        <ion-icon class="text-xl" name="image" color="dark"></ion-icon>
+    </div>
+}

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

@@ -0,0 +1,95 @@
+import { Component, computed, effect, input, Input, InputSignal, OnInit, Signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+
+import { ApiUrlProviderService } from '../../services/web/api-url-provider.service';
+import { LoadingComponent } from '../loading/loading.component';
+import { SecurePipe } from '../../pipes/secure.pipe';
+
+@Component({
+  standalone: true,
+  imports: [IonicModule, CommonModule, LoadingComponent, SecurePipe],
+  selector: 'image',
+  templateUrl: './image.component.html',
+  styleUrls: ['./image.component.scss'],
+})
+export class ImageComponent  implements OnInit {
+
+  /** Tipo de prenchimento e borda  do objeto */
+  @Input() fill: 'clear'| 'outline' | 'solid' = 'outline';
+  /** Tipo de prenchimento da imagem */
+  @Input() object: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' = 'contain';
+
+  ClassFill: string;
+  SetClassFill(): void{
+    switch(this.fill){
+      case('clear'):{
+        this.ClassFill = ''
+        break;
+      }
+      case('outline'):{
+        this.ClassFill = 'p-2 translucid-border rounded-2xl'
+        break;
+      }
+      case('solid'):{
+        this.ClassFill = 'p-2 translucid-border bg-medium/10 rounded-2xl'
+        break;
+      }
+    }
+  }
+  ClassObject: string
+  SetClassObject(): void{
+    switch(this.object){
+      case('contain'):{
+        this.ClassFill = 'object-contain'
+        break;
+      }
+      case('cover'):{
+        this.ClassFill = 'object-cover'
+        break;
+      }
+      case('fill'):{
+        this.ClassFill = 'object-fill'
+        break;
+      }
+      case('none'):{
+        this.ClassFill = 'object-none'
+        break;
+      }
+      case('scale-down'):{
+        this.ClassFill = 'object-scale-down'
+        break;
+      }
+    }
+  }
+
+  /** Link */
+  src: InputSignal<string | null> = input<string | null>();
+  _src: Signal<string> = computed(() => { 
+    if(this.src()?.startsWith("http")){
+      return this.src();
+    }
+    else
+    if(this.src()?.startsWith('assets')){
+      return window.origin + '/' + this.src()
+    }
+    else{
+      return this.apiUrlProviderService.apiUrl + this.src()
+    }
+  });
+
+  err: boolean = false;
+  loading: boolean = false;
+
+  constructor(
+    public apiUrlProviderService: ApiUrlProviderService
+  ) { 
+    effect(() => {
+      this.err = !this.src();
+    });
+  }
+
+  ngOnInit() {
+    this.SetClassFill();
+  }
+}

package/src/lib/components/info-popover/info-popover.component.html

@@ -0,0 +1,23 @@
+<div class="min-w-fit min-h-fit {{position}}">
+  <ion-button [fill]="fill" size="small" class="size-8 m-0" (click)="button ? popover.present($event) : null" (mouseenter)="!button ? popover.present($event) : null">
+    <ion-icon slot="icon-only" name="help"></ion-icon>
+  </ion-button>
+  
+  <ion-popover #popover triggerAction="hover">
+    <ng-template>
+      <ion-content class="ion-padding">
+        <div class="w-56 text-sm">
+          <ng-content></ng-content>
+        </div>
+  
+        @if (button) {
+          <div class="w-56 h-8 flex items-center justify-center mt-3">
+            <ion-text class="cursor-pointer" color="primary" (click)="ClickEvent()">
+              <ion-icon class="align-sub" name="information-circle"></ion-icon> Clique para saber mais
+            </ion-text>
+          </div>
+        }
+      </ion-content>
+    </ng-template>
+  </ion-popover>
+</div>

package/src/lib/components/info-popover/info-popover.component.ts

@@ -0,0 +1,75 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+
+@Component({
+  standalone: true,
+  imports: [ IonicModule, CommonModule ],
+  selector: 'info-popover',
+  templateUrl: './info-popover.component.html',
+  styleUrls: ['./info-popover.component.scss'],
+})
+export class InfoPopoverComponent  implements OnInit {
+
+  @Output('OnClick') clickEventEmitter: EventEmitter<void> = new EventEmitter<void>()
+
+  @Input() button: boolean = false;
+  @Input() fill: string = 'solid';
+  @Input('position') _position: string = 'relative';
+  position: string = '';
+
+  SetPositionClass(){
+    switch(this._position){
+      case('relative'): {
+        this.position = "relative"; 
+      }
+      break;
+      case('top-right'):{
+        this.position = "absolute top-3 right-3"; 
+      }
+      break;
+      case('right'):{
+        this.position = "absolute top-1/2 bottom 1/2 right-3"; 
+      }
+      break;
+      case('bottom-right'):{
+        this.position = "absolute bottom-3 right-3"; 
+      }
+      break;
+      case('top'):{
+        this.position = "absolute top-3 right-1/2 left-1/2"; 
+      }
+      break;
+      case('bottom'):{
+        this.position = "absolute left-1/2 right-1/2 bottom-3"; 
+      }
+      break;
+      case('left'):{
+        this.position = "absolute top-1/2 bottom-1/2 left-3"; 
+      }
+      break;
+      case('top-left'):{
+        this.position = "absolute top-3 left-3"; 
+      }
+      break;
+      case('bottom-left'):{
+        this.position = "absolute bottom-3 left-3"; 
+      }
+      break;
+      case('center'):{
+        this.position = "absolute top-1/2 bottom-1/2 left-1/2 right-1/2"; 
+      }
+      break;
+    }
+  }
+
+  constructor() { }
+
+  ngOnInit() {
+    this.SetPositionClass();
+  }
+
+  ClickEvent(){
+    this.clickEventEmitter.emit();
+  }
+}

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

@@ -0,0 +1,67 @@
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { AbstractControl, ControlContainer, ControlValueAccessor, Validators } from "@angular/forms";
+import { InputProviderFactory } from "./input-provider-factory";
+
+@Component({ template: '', providers: InputProviderFactory.GetProvider(CustomInput) })
+export abstract class CustomInput<T> implements ControlValueAccessor, OnInit{
+  //[ Basic ]
+  @Input() id       : string = "uniqueId";
+  /** Exibe o spinner de carregamento */
+  @Input() loading  : boolean;
+  /** Se ativo desabilita o Input */
+  @Input() disabled : boolean;
+  /** Indica se o formulário foi enviado */
+  @Input() submitted: boolean = false;
+  /** Titulo do Input */
+  @Input() label    : string  = "Label";
+  /** Torna o input obrigatório (Utiliza-se com ngModel) */
+  @Input() required : boolean = false;
+  
+  writeValue(obj: T): void { console.error("[ Component writeValue isnt implemented ]") }
+  
+  //[ Value ]
+  _model: T | null | undefined = null;
+  get model(): T | any      { return this._model;  }
+  set model(value: T | any) { this._model = value; }
+
+  //[ Handle Form / NgModel ]
+  @Input() formControlName: string;
+  
+  public   controlContainer : ControlContainer;
+  @Input('formControl') public control: AbstractControl;
+  protected elementRef      : ElementRef;
+
+  ngOnInit(){
+    if(!this.control && this.controlContainer && this.formControlName){ 
+      this.control = this.controlContainer.control.get(this.formControlName); 
+    }
+    
+    if(this.control){ 
+      this.required = this.control.hasValidator(Validators.required); 
+      this.invalid  = this.control.invalid;
+
+      this.control.events.subscribe({
+        next: (event) => { this.RunValidation(event.source); }
+      });
+    }
+  }
+
+  private RunValidation(control: AbstractControl): void{
+    this.required = control.hasValidator(Validators.required);
+    this.invalid  = control.invalid;
+  }
+  
+  invalid = false;
+  // classes: string;
+
+  @Output('blur') blurEmitter: EventEmitter<T> = new EventEmitter<T>();
+
+  //[ ControlValueAccessor ]
+  @Output('change') changeEmitter: EventEmitter<T> = new EventEmitter<T>();
+  propagateChange(obj: T): void{ this._onChange(obj); this.changeEmitter.emit(obj);; }
+
+  _onChange: Function = (v: any) => {}
+  _onTouch : Function = (v: any) => {}
+  registerOnChange (fn: (value: any) => void ){ this._onChange = fn }
+  registerOnTouched(fn: (value: any) => void ){ this._onTouch  = fn }
+}

package/src/lib/components/inputs/custom-signal-input.ts

@@ -0,0 +1,70 @@
+import { Component, ElementRef, Input, OnInit, OutputEmitterRef, WritableSignal, effect, model, output } from "@angular/core";
+import { AbstractControl, ControlContainer, ControlValueAccessor, Validators } from "@angular/forms";
+import { InputProviderFactory } from "./input-provider-factory";
+
+@Component({ template: '', providers: InputProviderFactory.GetProvider(CustomSignalInput) })
+export abstract class CustomSignalInput<T> implements ControlValueAccessor, OnInit{
+  //[ Basic ]
+  /** Exibe o spinner de carregamento */
+  @Input() loading  : boolean = false;
+  /** Se ativo desabilita o Input */
+  @Input() disabled : boolean = false;
+    /** Indica se o formulário foi enviado */
+  @Input() submitted: boolean = false;
+  /** Titulo do Input */
+  @Input() label    : string  = "Label";
+  /** Torna o input obrigatorio */
+  required: WritableSignal<boolean> = model<boolean>(false)
+  
+  writeValue(obj: T): void { console.error("[ Component writeValue isnt implemented ]") }
+  
+  //[ Value ]
+  protected _model: T | null = null;
+  get model(): T | any      { return this._model;  }
+  set model(value: T | any) { this._model = value; }
+
+  //[ Handle Form / NgModel ]
+  @Input()  formControlName : string;
+  public    controlContainer: ControlContainer;
+  @Input('formControl') 
+  public    control    : AbstractControl;
+  protected elementRef : ElementRef;
+
+  constructor(){
+    effect(() => { 
+      if(this.control){ this.invalid = this.control.invalid; }
+    });
+  }
+
+  ngOnInit(){
+    if(!this.control && this.controlContainer && this.formControlName){ 
+      this.control = this.controlContainer.control.get(this.formControlName); 
+    }
+    
+    if(this.control){ 
+      this.required.set(this.control.hasValidator(Validators.required));  
+      this.invalid  = this.control.invalid;
+
+      this.control.events.subscribe({ next: (event) => { this.RunValidation(); } });
+    }
+  }
+
+  private RunValidation(): void{
+    this.required.set(this.control.hasValidator(Validators.required)); 
+    this.invalid = this.control.invalid;
+  }
+  
+  invalid = false;
+
+  //[ ControlValueAccessor ]
+  /** Acionado quando um elemento perde o foco. */
+  blur  : OutputEmitterRef<T> = output<T>();
+  /** Emitido quando o valor é alterado. */
+  change: OutputEmitterRef<T> = output<T>();
+  propagateChange(obj: T): void{ this.onChange(obj); this.change.emit(obj);; }
+
+  onChange: (value: any) => void = (v: any) => { return; }
+  onTouch : (value: any) => void = (v: any) => { return; }
+  registerOnChange (fn: (value: any) => void ){ this.onChange = fn }
+  registerOnTouched(fn: (value: any) => void ){ this.onTouch  = fn }
+}

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

@@ -0,0 +1,18 @@
+<div class="flex relative overflow-hidden">
+  <ion-card class="cursor-pointer ion-card-input" [disabled]="loading || disabled"
+      [ngClass]="{
+        'invalid'  : invalid,
+        'submitted': submitted,
+        'disabled' : disabled,
+      }"
+    >
+    <ion-card-content class="default-transition flex h-full">
+      <div id="content" class="flex flex-col shrink-0 default-transition">
+        <ion-toggle   class="w-full grow flex items-center" *ngIf="configuration.type == types.toggle" [(ngModel)]="model">{{label}}</ion-toggle>
+        <ion-checkbox class="w-full grow flex items-center" *ngIf="configuration.type != types.toggle" [(ngModel)]="model">{{label}}</ion-checkbox>
+      </div>
+     
+    </ion-card-content>
+  </ion-card>
+  <input-loading [loading]="loading"></input-loading>
+</div>

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

@@ -0,0 +1,36 @@
+import { Component, ElementRef, Host, Input, OnInit, Optional, SkipSelf } from '@angular/core';
+import { ControlContainer } from '@angular/forms';
+
+import { InputBoolConfiguration, InputBoolType } from './input-bool.configuration';
+import { InputProviderFactory } from '../input-provider-factory';
+import { CustomInput } from '../custom-input';
+
+@Component({
+  selector: 'input-bool',
+  templateUrl: './input-bool.component.html',
+  styleUrls: ['./input-bool.component.scss', '../inputs.scss'],
+  providers: InputProviderFactory.GetProvider(InputBoolComponent)
+})
+export class InputBoolComponent extends CustomInput<boolean> implements OnInit {
+
+  @Input() configuration: InputBoolConfiguration = new InputBoolConfiguration();
+  types = InputBoolType;
+
+  constructor(
+    @Optional() @Host() @SkipSelf()
+    override controlContainer: ControlContainer,
+    override elementRef: ElementRef
+  ) { super(); }
+
+  override async ngOnInit() {
+    super.ngOnInit();
+  }
+
+  override get model()    : boolean  { return this._model; }
+  override set model(value: boolean) { this.setModel(value); this.propagateChange(value); }
+  setModel(value: boolean){
+    this._model = value;
+  }
+
+  override writeValue(value: boolean): void { this.setModel(value); }
+}

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

@@ -0,0 +1,14 @@
+
+export class InputBoolConfiguration{
+  constructor(
+    /** Estilo do ckeckbox 
+     * - checkbox : @link https://ionicframework.com/docs/api/checkbox
+     * - toggle : @link https://ionicframework.com/docs/api/toggle
+    */
+    public type: InputBoolType = InputBoolType.checkbox
+  ){}  
+}
+export enum InputBoolType{
+  checkbox = "checkbox",
+  toggle   = "toogle",
+}