@sapphire-ion/framework 1.2.43 → 1.2.45

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">
-      {{label()}}
-    </ion-checkbox>
-  }
-  @else { 
-    <!-- toogle -->
-    <ion-toggle (click)="$event.stopPropagation()" #toggle [ngModel]="value()" (ngModelChange)="SetValue(!value())" class="text-sm text-dark">
-      {{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   = "toogle",
-}

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>