@sapphire-ion/framework 1.2.62 → 1.3.1

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,94 @@
+import { Component, ElementRef, Input, InputSignal, OnInit, OutputEmitterRef, ViewChild, WritableSignal, effect, inject, input, model, output, signal } from "@angular/core";
+import { AbstractControl, ControlContainer, ControlEvent, ControlValueAccessor, ValidationErrors, Validator, Validators } from "@angular/forms";
+import { InputProviderFactory } from "./input-provider-factory";
+
+@Component({ 
+  template: '', 
+  providers:  [
+    ...InputProviderFactory.GetProviders(CustomInput)
+  ] 
+})
+export abstract class CustomInput<T> implements ControlValueAccessor, OnInit{
+
+  /** Exibe o spinner de carregamento */
+  loading: WritableSignal<boolean> = model(false);
+  /** Se ativo desabilita o Input */
+  disabled: WritableSignal<boolean> = model(false);
+  /** Indica se o formulário foi enviado */
+  submitted: WritableSignal<boolean> = model(false);
+  /** Titulo do Input */
+  label: InputSignal<string> = input<string>("Label");
+
+  /** Torna o input obrigatorio */
+  required: WritableSignal<boolean> = model<boolean>(false)
+  
+  abstract writeValue(obj: T): void | Promise<void>;
+  abstract setFocus(event: MouseEvent | null): void;
+
+  //[ Value ]
+  
+  value: WritableSignal<T | undefined> = signal<T | undefined>(undefined);
+
+  /** @virtual */
+  SetValue(obj: T): void {
+    this.value.set(obj); 
+    this.runValidation();
+    this.propagateChange(obj); 
+  }
+  // /** @virtual */
+  // GetValue(): T | undefined { return this.value; }
+
+  //[ Handle Form / NgModel ]
+  @Input()  formControlName : string;
+  public    controlContainer: ControlContainer;
+  @Input('formControl') 
+  public    control    : AbstractControl;
+  protected elementRef : ElementRef;
+
+  constructor(){
+    try {
+      this.controlContainer = inject(ControlContainer);
+    } catch {}
+    effect(() => { 
+      if(this.control){ this.invalid = this.control.invalid; }
+    });
+  }
+
+  /** @virtual */
+  ngOnInit(): void | Promise<void> {
+    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(); } });
+    }
+  }
+
+  protected runValidation(): void{
+    if(this.control){
+      this.required.set(this.control.hasValidator(Validators.required)); 
+      this.invalid = this.control.invalid;
+    }
+    else{
+      this.invalid = !this.value() && this.required();
+    }
+  }
+  
+  protected invalid: boolean = false;
+
+  //[ ControlValueAccessor ]
+  /** Acionado quando um elemento perde o foco. */
+  blur  : OutputEmitterRef<FocusEvent> = output<FocusEvent>();
+  /** Emitido quando o valor é alterado. */
+  change: OutputEmitterRef<T> = output<T>();
+  propagateChange(obj: T): void{ this.onChange(obj); this.change.emit(obj);; }
+
+  onChange: (value: T) => void = (value: T) => { return; }
+  onTouch : (value: T) => void = (value: T) => { return; }
+  registerOnChange (fn: (value: T) => void ){ this.onChange = fn }
+  registerOnTouched(fn: (value: T) => void ){ this.onTouch  = fn }
+}

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

@@ -0,0 +1,26 @@
+<div 
+  #inputContainer
+  tabindex="-1"
+  class="input-container" 
+  (click)="setFocus($event)"
+  [class.required]="required()" 
+  [class.submitted]="submitted()" 
+  [class.invalid]="invalid" 
+  [class.disabled]="disabled() || loading()"
+  [class.loading]="loading()"
+>
+  @if(configuration().type == "checkbox"){
+    <ion-checkbox (click)="$event.stopPropagation()" #checkbox [ngModel]="value()" (ngModelChange)="SetValue(!value())" class="text-sm text-dark my-1.5 truncate">
+      {{label()}}
+    </ion-checkbox>
+  }
+  @else { 
+    <!-- toogle -->
+    <ion-toggle (click)="$event.stopPropagation()" #toggle [ngModel]="value()" (ngModelChange)="SetValue(!value())" class="text-sm text-dark truncate">
+      {{label()}}
+    </ion-toggle>
+  }
+  <div class="loading-container" [class.loading]="loading()">
+    <ion-spinner></ion-spinner>
+  </div>
+</div>

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

@@ -0,0 +1,39 @@
+import { Component, ElementRef, forwardRef, input, InputSignal, OnInit, ViewChild } from '@angular/core';
+import { InputBoolConfiguration } from './input-bool.configuration';
+import { InputProviderFactory } from '../input-provider-factory';
+import { CustomInput } from '../custom-input';
+import { IonCheckbox, IonToggle } from '@ionic/angular';
+
+@Component({
+  selector: 'input-bool',
+  templateUrl: './input-bool.component.html',
+  styleUrls: ['./input-bool.component.scss', '../inputs.scss'],
+  providers: [
+    ...InputProviderFactory.GetProviders(InputBoolComponent), 
+    { provide: CustomInput, useExisting: forwardRef(() => InputBoolComponent) },
+  ],
+})
+
+
+
+export class InputBoolComponent extends CustomInput<boolean> {
+
+  configuration: InputSignal<InputBoolConfiguration> = input<InputBoolConfiguration>(new InputBoolConfiguration());
+
+  @ViewChild(IonCheckbox) ionCheckbox: ElementRef<IonCheckbox>;
+  @ViewChild(IonToggle)   ionToggle: ElementRef<IonToggle>;
+  @ViewChild('inputContainer') inputContainer: ElementRef<HTMLDivElement>;
+  override setFocus(event: MouseEvent | null): void { 
+    if(this.inputContainer) { 
+      this.inputContainer.nativeElement.focus(); 
+      this.SetValue(!this.value);
+    }
+  }
+
+  constructor() { super(); }
+
+  override writeValue(obj: boolean): void | Promise<void> {
+    this.value.set(obj);
+    this.runValidation();
+  }
+}

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   = "toggle",
+}

package/src/lib/components/inputs/input-cep/input-cep.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()" 
+    [maskito]="mask"
+    inputmode="numeric"
+    (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-cep/input-cep.component.ts

@@ -0,0 +1,41 @@
+import { Component, ElementRef, forwardRef, input, InputSignal, model, ModelSignal, ViewChild } from '@angular/core';
+import { MaskitoMaskExpression, MaskitoOptions, maskitoTransform } from '@maskito/core';
+import { CustomInput } from '../custom-input';
+import { InputProviderFactory } from '../input-provider-factory';
+import { InputCepConfiguration } from './input-cep.configuration';
+
+@Component({
+  selector: 'input-cep',
+  templateUrl: './input-cep.component.html',
+  styleUrls: ['./input-cep.component.scss', '../inputs.scss'],
+  providers: [
+    ...InputProviderFactory.GetProviders(InputCepComponent),
+    { provide: CustomInput, useExisting: forwardRef(() => InputCepComponent) },
+  ],
+})
+export class InputCepComponent extends CustomInput<string> {
+  configuration: InputSignal<InputCepConfiguration> = input<InputCepConfiguration>(new InputCepConfiguration());
+
+  @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(); }
+
+  override writeValue(obj: string): void | Promise<void> {
+    this.value.set(obj);
+    this.runValidation();
+  }
+
+  readonly mask: MaskitoOptions = mask;
+}
+
+const cepMask : MaskitoMaskExpression = [ /\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/ ];
+const mask: MaskitoOptions = { mask: cepMask };
+export function FormatCep(value: string): string {
+  return maskitoTransform(value, mask);  
+}

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

@@ -0,0 +1,4 @@
+export class InputCepConfiguration{
+  constructor(
+  ){}
+}

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

@@ -0,0 +1,79 @@
+<div 
+  #inputContainer
+  class="input-container" 
+  (click)="setFocus($event); Present($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
+    [maskito]="HEXMask"
+    [ngModel]="value()"
+    (ngModelChange)="SetColorFromHex($event, true, true)" 
+    [disabled]="disabled() || loading()"
+    (blur)="blur.emit($event)"
+  />
+  <div class=" absolute bottom-2 right-8 size-5 rounded-sm overflow-hidden" [style]="{ 'background': value() }"> </div>
+
+  <ion-button tabindex="-1" class="absolute right-1 bottom-1" (click)="CopyToClipboard(); $event.stopPropagation();" color="medium" size="small" fill="clear" style="--border-radius: .5rem">
+    <ion-icon name="clipboard" slot="icon-only"></ion-icon>
+  </ion-button>
+
+    <!-- [maxlength]="configuration().maxlength" -->
+    <!-- [type]="configuration().type"  -->
+  <div class="loading-container" [class.loading]="loading()">
+    <ion-spinner></ion-spinner>
+  </div>
+</div>
+
+<sion-popover
+  #popover 
+  width="fit-content" 
+  [anchor]="inputContainer" 
+>
+  <div class="size-full p-2 flex gap-1">  
+    <div class="flex flex-col w-44 shrink-0 gap-1">
+      <div id="gradientWrapper" class="w-44 h-32 relative">
+        <canvas #gradient width="176" height="128" class="size-full rounded-sm translucid-border"></canvas>
+        <div class="color-indicator quick-transition" [style.left.%]="indicatorX" [style.top.%]="indicatorY"></div>
+      </div>
+
+      <div id="hueWrapper" class="w-full relative">
+        <canvas #hueSlider   class="w-full rounded h-[22px]" width="176" height="22"></canvas>
+        <div class="indicator quick-transition" [style.left.%]="hslColor.h / 3.6"></div>
+      </div>
+
+      <div id="alphaWrapper" class="w-full relative">
+        <canvas #alphaSlider class="w-full rounded h-[22px]" width="176" height="22"></canvas>
+        <div class="indicator quick-transition" [style.left.%]="alpha"></div>
+      </div>
+
+      <div class="w-full flex shrink-0">
+        <div class="w-full grid grid-cols-5 gap-1">
+          <ng-container *ngTemplateOutlet="templateColor; context: { $implicit: '#000000FF' }"></ng-container>
+          <ng-container *ngTemplateOutlet="templateColor; context: { $implicit: '#3880FFFF' }"></ng-container>
+          <ng-container *ngTemplateOutlet="templateColor; context: { $implicit: '#2DD36FFF' }"></ng-container>
+          <ng-container *ngTemplateOutlet="templateColor; context: { $implicit: '#FFC409FF' }"></ng-container>
+          <ng-container *ngTemplateOutlet="templateColor; context: { $implicit: '#EB445AFF' }"></ng-container>
+          
+          <ng-container *ngTemplateOutlet="templateColor; context: { $implicit: '#FFFFFFFF' }"></ng-container>
+          <ng-container *ngTemplateOutlet="templateColor; context: { $implicit: '#59168bFF' }"></ng-container>
+          <ng-container *ngTemplateOutlet="templateColor; context: { $implicit: '#C6005CFF' }"></ng-container>
+          <ng-container *ngTemplateOutlet="templateColor; context: { $implicit: '#FB2C36FF' }"></ng-container>
+          <ng-container *ngTemplateOutlet="templateColor; context: { $implicit: '#314158FF' }"></ng-container>
+        </div>
+      </div>  
+    </div>
+  </div>
+</sion-popover>
+
+<ng-template #templateColor let-color>
+  <div class="size-8 rounded translucid-border cursor-pointer" (click)="SetColorFromHex(color, true, true)" [style.background]="color"></div>
+</ng-template>