@sapphire-ion/framework 1.3.5 → 1.3.8

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

@@ -1,35 +0,0 @@
-<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

@@ -1,19 +0,0 @@
-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

@@ -1,17 +0,0 @@
-@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

@@ -1,95 +0,0 @@
-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

@@ -1,23 +0,0 @@
-<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

@@ -1,75 +0,0 @@
-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

@@ -1,94 +0,0 @@
-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

@@ -1,26 +0,0 @@
-<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

@@ -1,39 +0,0 @@
-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

@@ -1,14 +0,0 @@
-
-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

@@ -1,27 +0,0 @@
-<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

@@ -1,41 +0,0 @@
-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

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

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

@@ -1,79 +0,0 @@
-<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>