@sapphire-ion/framework 1.2.41 → 1.2.43

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

@@ -0,0 +1,157 @@
+import { Component, computed, effect, EventEmitter, input, Input, InputSignal, Output, signal, Signal, WritableSignal } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule, NavController } from '@ionic/angular';
+import { Menu } from './menu';
+
+import { DrawerGroupComponent } from './drawer-group/drawer-group.component';
+import { LoadingComponent } from '../../components/loading/loading.component';
+import { SIonPopoverModule } from '../popover/sion-popover.module';
+import { Router, RouterLinkWithHref } from '@angular/router';
+import { GenericService } from '../../services/generic.service';
+import { Search } from '../../services/utils.service';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    IonicModule,
+    LoadingComponent,
+    DrawerGroupComponent,
+    TranslateModule,
+    SIonPopoverModule,
+    RouterLinkWithHref,
+    ReactiveFormsModule,
+    FormsModule
+  ],
+  selector: 'drawer',
+  templateUrl: './drawer.component.html',
+  styleUrls: ['./drawer.component.scss'],
+})
+export class DrawerComponent {
+
+  TranslationModule: any = {
+    Permissao     : 'Entities.Permissao.',
+    PermissaoGrupo: 'Entities.PermissaoGrupo.',
+    SemResultado  : 'Messages.SemResultado'
+  };
+
+  @Input() loading: boolean = true;
+  lstMenu: InputSignal<Menu[]> = input<Menu[]>();
+  lstFlattenMenu: Signal<Menu[]> = computed(() => { return FlattenMenus(this.lstMenu()) });
+
+  @Input() colapsed: boolean = false;  
+  @Output() colapsedChange: EventEmitter<boolean> = new EventEmitter<boolean>;  
+  @Input() title: string;
+  @Input() useTranslation: boolean = false;
+  
+  constructor(
+    public router: Router,
+    private navController: NavController,
+    private genericService: GenericService
+  ) { 
+    effect(() => {
+      //Handle Menu Title
+      const lstFlat = this.lstFlattenMenu();
+      const currentMenu = lstFlat.find(p => window.location.pathname.includes('/' + p.route));
+      const group: Menu | null = FindMenuParent(this.lstMenu(), currentMenu);
+      if(group){
+        this.CurrentGroupActive = group;
+      }
+      else{
+        this.CurrentGroupActive = this.lstMenu()[0];
+      }
+    });
+  }
+  CurrentGroupActive: Menu = null;
+
+  ToggleCollapsed(){
+    this.colapsedChange.emit(!this._enterColapsed);
+    this._enterColapsed = false;
+  }
+
+  _enterColapsed: boolean = false;
+  onMouseEnter(){
+    if(this.colapsed){
+      this._enterColapsed = true;
+      this.colapsedChange.emit(false);
+    }
+  }
+  onMouseLeave(){
+    if(this._enterColapsed){
+      this._enterColapsed = false;
+      this.colapsedChange.emit(true);
+    }
+  }
+
+  HandleNav(item: Menu | any, event: MouseEvent) {
+    if(event.ctrlKey || event.metaKey){
+      window.open(window.origin + '/' + item.route, '_blank');
+      event.preventDefault();
+      return;
+    }
+    this.SetTitle(item);
+    const vGroup: Menu | null = FindMenuParent(this.lstMenu(), item);
+    if(vGroup){
+      this.CurrentGroupActive = vGroup;
+    }
+    this.navController.navigateRoot('/' + item.route);
+  }
+  SetTitle(item: Menu){
+    this.genericService.SetTitle(item.title);
+  }
+
+  search: WritableSignal<string> = signal<string>("");
+  lstMenuFiltered: Signal<Menu[]> = computed(() => {
+    const str = this.search().toLowerCase();
+    const lstS1 = this.lstMenu().map(p => {
+      return new Menu(p.type, p.title, p.icon, p.lstMenu.filter(x => x.title.toLowerCase().includes(str)), p.route);
+    });
+    const lstS2 = lstS1.filter(p => p.lstMenu.length > 0);
+    return lstS2;
+  });
+}
+
+/**
+ * Flattens a hierarchical Menu[] structure into a single array
+ * containing all Menu items from the original array and all nested items
+ * @param menus The array of Menu items to flatten
+ * @returns A flattened array containing all Menu items
+ */
+function FlattenMenus(menus: Menu[]): Menu[] {
+  const result: Menu[] = [];
+  
+  function addMenuItems(items: Menu[]) {
+    for (const menu of items) {
+      // Add current menu to result
+      result.push(menu);
+      
+      // Process nested menus if they exist
+      if (menu.lstMenu && menu.lstMenu.length > 0) {
+        addMenuItems(menu.lstMenu);
+      }
+    }
+  }
+  
+  addMenuItems(menus);
+  return result;
+}
+
+function FindMenuParent(menus: Menu[], targetMenu: Menu): Menu | null {
+  for (const menu of menus) {
+    // Check if current menu has the target in its direct children
+    if (menu.lstMenu && menu.lstMenu.some(m => m === targetMenu)) {
+      return menu;
+    }
+    
+    // Search deeper in the hierarchy
+    if (menu.lstMenu && menu.lstMenu.length > 0) {
+      const parent = FindMenuParent(menu.lstMenu, targetMenu);
+      if (parent) {
+        return parent;
+      }
+    }
+  }
+  
+  return null;
+}

package/src/lib/components/drawer/menu.ts

@@ -0,0 +1,20 @@
+
+export class Menu{
+  id: number;
+  route: string | null;
+  icon : string | null;
+  title: string;
+  lstMenu: Menu[];
+  type: 'Menu' | 'MenuGroup'
+  constructor(type: 'Menu' | 'MenuGroup', title: string, icon : string | null, lstMenu: Menu[] = [], route: string | null = null){
+    this.type  = type; 
+    this.title = title;
+    this.route = route;
+    if(icon){
+      this.icon  = icon;
+    }else{
+      this.icon = "layers";
+    }
+    this.lstMenu = lstMenu;
+  }
+}

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

@@ -0,0 +1,43 @@
+@if(_configuration){
+  @switch (type) {
+    @case ('String') {
+      <input-string [(ngModel)]="model" [label]="label" (blur)="Change()"></input-string>
+    }
+    @case ('Number') {
+      <input-number (change)="Change()" [(ngModel)]="model" [label]="label" [configuration]="_configuration"></input-number>
+    }
+    @case ('Decimal') {
+      <input-decimal (change)="Change()" [(ngModel)]="model" [label]="label" [configuration]="_configuration"></input-decimal>
+    }
+    @case ('Currency') {
+      <input-currency (change)="Change()" [(ngModel)]="model" [label]="label" [configuration]="_configuration"></input-currency>
+    }
+    @case ('Select') {
+      <input-select (change)="Change()" [(ngModel)]="model" class="th-select" [label]="label" [configuration]="_configuration"></input-select>
+    }
+    @case ('TextArea') {
+      <input-string (change)="Change()" [(ngModel)]="model" class="th-select" [label]="label"></input-string>
+    }
+    @case ('Bool') {
+      <input-select (change)="Change()" [(ngModel)]="model" class="th-select" [label]="label" placeholder="" [configuration]="_configuration"></input-select>
+    }
+    @case ('Date') {
+      <input-date (change)="Change()" [(ngModel)]="model" [label]="label" [configuration]="_configuration"></input-date>
+    }
+    @case ('DateTime') {
+      <input-date-time (change)="Change()" [(ngModel)]="model" [label]="label" [configuration]="_configuration"></input-date-time>
+    }
+    @case ("Cep") {
+      <input-cep (change)="Change()" [(ngModel)]="model" [label]="label"></input-cep>
+    }
+    @case ("Cpf") {
+      <input-cpf (change)="Change()" [(ngModel)]="model" [label]="label" [configuration]="_configuration"></input-cpf>
+    }
+    @case ("Cnpj") {
+      <input-cnpj (change)="Change()" [(ngModel)]="model" [label]="label" [configuration]="_configuration"></input-cnpj>
+    }
+    @case ("CpfCnpj") {
+      <input-cpf-cnpj (change)="Change()" [(ngModel)]="model" [label]="label" [configuration]="_configuration"></input-cpf-cnpj>
+    }
+  }
+}

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

@@ -0,0 +1,141 @@
+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';
+import { InputCpfCnpjConfiguration } from '../inputs/input-cpf-cnpj/input-cpf-cnpj.configuration';
+import { InputCepConfiguration } from '../inputs/input-cep/input-cep.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)){ 
+        if(this.filter().value){
+          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();    } else
+      if(this.type == InputType.Cpf     ){ this._configuration = new InputCpfCnpjConfiguration("CPF");  } else
+      if(this.type == InputType.Cnpj    ){ this._configuration = new InputCpfCnpjConfiguration("CNPJ");  } else  
+      if(this.type == InputType.CpfCnpj ){ this._configuration = new InputCpfCnpjConfiguration("CPFCNPJ");  }
+      if(this.type == InputType.Cep     ){ this._configuration = new InputCepConfiguration();  }
+    }
+
+    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();
+  }
+}