@sapphire-ion/framework 0.30.26 → 0.30.28

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

@@ -0,0 +1,76 @@
+import { AbstractControl } from "@angular/forms";
+
+export class ControlError {
+  constructor(public message: string){}
+}
+
+export class FormValidators{
+  static readonly CPFError    : ControlError = new ControlError("CPF incompleto");
+  static readonly CnpjError   : ControlError = new ControlError("CNPJ incompleto");
+  static readonly CPFCnpjError: ControlError = new ControlError("CPF / CNPJ incompleto");
+  static CPFValidator(control: AbstractControl): ControlError | null {
+    if(control.value != null){
+      if(control.value.length != 11){ return FormValidators.CPFError; }
+      return null;
+    }
+    return FormValidators.CPFError;
+  } 
+  static CnpjValidator(control: AbstractControl): ControlError | null {
+    if(control.value != null){
+      if(control.value.length != 14){ return FormValidators.CnpjError; }
+      return null;
+    }
+    return FormValidators.CnpjError;
+  } 
+  static CPFCpnjValidator(control: AbstractControl): ControlError | null {
+    if(control.value != null){
+      if(control.value.length < 11){
+        return FormValidators.CPFError;
+      }else
+      if(control.value.length > 11 && control.value.length != 14){  
+        return FormValidators.CnpjError;
+      }
+      return null;
+    }
+    return null;
+  } 
+
+  static readonly PositiveNonZeroNumberError: ControlError = new ControlError("%fieldName% deve ser maior que 0!");
+  static PositiveNonZeroNumberValidator(fieldName: string): (control: AbstractControl) => ControlError | null {
+    return ((control: AbstractControl): ControlError | null => {
+      const Error = FormValidators.PositiveNonZeroNumberError.message.replace("%fieldName%", fieldName);
+      if(control.value != null){
+        if(control.value <= 0){ return new ControlError(Error); }
+        return null;
+      }
+      return new ControlError(Error);;
+    })
+  }
+
+  static readonly PositiveNumberError: ControlError = new ControlError("%fieldName% deve ser maior ou igual que 0!");
+  static PositiveNumberValidator(fieldName: string): (control: AbstractControl) => ControlError | null {
+    return ((control: AbstractControl): ControlError | null => {
+      const Error = FormValidators.PositiveNumberError.message.replace("%fieldName%", fieldName);
+      if(control.value != null){
+        if(control.value < 0){ return new ControlError(Error); }
+        return null;
+      }
+      return new ControlError(Error); 
+    })
+  }
+
+  static readonly ValueBetweenError = new ControlError("%fieldName% deve ser maior ou igual a %min% e menor ou igual a %max%");
+  static ValueBetweenValidator(min: number, max: number, fieldName: string, equalMin: boolean = true, equalMax: boolean = true): (control: AbstractControl) => ControlError | null {
+    return ((control: AbstractControl): ControlError | null => {
+      const Error = FormValidators.ValueBetweenError.message.replace("%fieldName%", fieldName).replace("%min%", min.toString()).replace("%max%", max.toString());
+      if(control.value != null){
+        if(control.value < min && equalMin){ return new ControlError(Error); }else
+        if(control.value > max && equalMax){ return new ControlError(Error); }else
+        if(control.value <= min && !equalMin){ return new ControlError(Error); }else
+        if(control.value >= max && !equalMax){ return new ControlError(Error); }
+        return null;
+      }
+      return new ControlError(Error); 
+    });
+  }
+}

package/src/lib/components/inputs/inputs.module.ts

@@ -0,0 +1,64 @@
+import { ScrollingModule } from '@angular/cdk/scrolling'; 
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MaskitoDirective } from '@maskito/angular';
+
+import { NgVarDirective } from '../../directives/ng-var.directive';
+
+import { InputBoolComponent } from './input-bool/input-bool.component';
+import { InputDateComponent } from './input-date/input-date.component';
+
+import { InputDecimalComponent  } from './input-decimal/input-decimal.component';
+
+import { InputFileComponent      } from './input-file/input-file.component';
+import { DownloadButtonComponent } from './input-file/download-button/download-button.component';
+
+import { LoadingComponent       } from '../loading/loading.component';
+import { InputSelectComponent   } from './input-select/input-select.component';
+import { InputStringComponent   } from './input-string/input-string.component';
+import { InputTextareaComponent } from './input-textarea/input-textarea.component';
+import { InputLoadingComponent  } from './input-loading/input-loading.component';
+import { InputColorComponent    } from './input-color/input-color.component';
+import { InputCpfCnpjComponent  } from './input-cpf-cnpj/input-cpf-cnpj.component';
+import { InputSelectOptionComponent } from './input-select/input-select-option/input-select-option.component';
+import { InputSelectTemplateDirective } from './input-select/input-select-template.directive';
+import { InputSelectInternalOptionComponent } from './input-select/input-select-internal-option/input-select-internal-option.component';
+import { TextTooltipComponent } from "../text-tooltip/text-tooltip.component";
+import { ImageComponent } from '../image/image.component';
+const declare_export = [
+  InputBoolComponent     , 
+  InputDateComponent     , 
+  InputDecimalComponent  , 
+  InputFileComponent     , 
+  DownloadButtonComponent, 
+
+  InputSelectComponent        ,
+  InputSelectOptionComponent  , 
+  InputSelectTemplateDirective,
+
+  InputStringComponent  , 
+  InputTextareaComponent, 
+  InputLoadingComponent ,
+  InputColorComponent   ,
+  InputCpfCnpjComponent
+]
+
+@NgModule({
+  declarations: [ ...declare_export, InputSelectInternalOptionComponent ],
+  exports     : [ ...declare_export ],
+  imports: [
+    CommonModule,
+    IonicModule,
+    ReactiveFormsModule,
+    FormsModule,
+    NgVarDirective,
+    LoadingComponent,
+    MaskitoDirective,
+    ScrollingModule,
+    TextTooltipComponent,
+    ImageComponent
+  ],
+})
+export class InputsModule { }

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

@@ -0,0 +1,28 @@
+@switch (type) {
+  @case (1) {
+    <div class="w-full text-center h-16 flex items-center justify-center">
+      <div class="flex items-center justify-center">
+        <ion-spinner></ion-spinner>
+      </div>
+      @if(text){
+        <span>{{text}}</span>
+      }
+    </div>
+  }
+  @case (2) {
+    <div class="w-full text-center h-16 flex items-center justify-center">
+      <div class="flex items-center justify-center">
+        <ion-spinner></ion-spinner> 
+        @if (text) {
+          <span class="ml-3">{{text}}</span>
+        }
+      </div>
+    </div>
+  }
+  @case (3) {
+    <div class="absolute top-0 left-0 size-full opacity-0 -z-50 default-transition -translate-y-12 flex items-center justify-center !translucid-background" 
+      [ngClass]="{'!z-20 !opacity-100 !translate-y-0': loading}">
+      <loading [type]="2" [text]="text"></loading>   
+    </div>
+  }
+}

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

@@ -0,0 +1,29 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+
+@Component({
+  standalone: true,
+  imports: [ CommonModule, IonicModule ],
+  selector: 'loading',
+  templateUrl: './loading.component.html',
+  styleUrls: ['./loading.component.scss'],
+})
+export class LoadingComponent  implements OnInit {
+
+  /** Texto exibido */
+  @Input() text    : string = "Carregando, por favor aguarde...";
+  /** Tipo do loading
+   *  1 - Componente basico - h-16 de altura 
+   *  2 - Componente basico - h-16 de altura 
+   *  3 - Componente absoluto, preenche o elemento superior relativo
+   */
+  @Input() type    : 1 | 2 | 3 = 1;
+  /** Utilizado no tipo 3, quando inativo é hidden */
+  @Input() loading : boolean = true;
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

package/src/lib/components/login/login-admin/login-admin.component.html

@@ -0,0 +1,28 @@
+@if (this.authService.isAdmin || !this.apiUrlProviderService.production) {
+  <ion-button (click)="adminPopover.present($event)" fill="outline" class="aspect-square h-8 z-50" size="small">
+    <ion-icon name="shield" slot="icon-only"></ion-icon>
+  </ion-button>
+  <ion-popover id="admin-popover" #adminPopover>
+    <ng-template>
+      <ion-content class="p-2 bg-transparent">
+      <div class="p-2">
+        <input-select
+          [(ngModel)]="idUsuario"
+          label="Logar como..."
+          (change)="SelectUser($event)"
+          [configuration]="selectUserConfiguration"
+        ></input-select>
+  
+        <div class="rounded-2xl mt-2 overflow-hidden border border-primary/30">
+          <div class="py-2 text-center border-b border-b-medium/30">
+            <span class="font-poppins"> API </span>
+          </div>
+          <ion-item lines="none" style="--border-width: 0 !important;">
+            <ion-input [(ngModel)]="apiUrl" (ngModelChange)="SetApiUrl()"></ion-input>
+          </ion-item>
+        </div>
+      </div>
+      </ion-content>
+    </ng-template>
+  </ion-popover>
+}

package/src/lib/components/login/login-admin/login-admin.component.ts

@@ -0,0 +1,51 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+
+import { ApiUrlProviderService } from '../../../services/web/api-url-provider.service';
+import { UsuarioService        } from '../../../services/usuario.service';
+import { AuthService           } from '../../../services/auth.service';
+
+import { InputsModule             } from '../../../components/inputs/inputs.module';
+import { InputSelectConfiguration } from '../../../components/inputs/input-select/input.select.configuration';
+
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    IonicModule,
+    FormsModule,
+    ReactiveFormsModule,
+    InputsModule
+  ],
+  selector: 'login-admin',
+  templateUrl: './login-admin.component.html',
+  styleUrls: ['./login-admin.component.scss'],
+})
+export class LoginAdminComponent  implements OnInit {
+
+  constructor(
+    public apiUrlProviderService: ApiUrlProviderService,
+    public authService: AuthService,
+    private usuarioService: UsuarioService,
+  ) { }
+
+  idUsuario: number | null;
+
+  async ngOnInit() {
+    try{
+      this.idUsuario = (await this.authService.LoadToken()).id;
+    }catch{}
+  }
+
+  public selectUserConfiguration: InputSelectConfiguration = new InputSelectConfiguration('id', ((v) => { return v.nome + ' - ' + v.apelido; }), false, true, this.usuarioService);
+  SelectUser(event: number){
+    if(event){ this.authService.BypassLogin(event).then(() => window.location.reload() ) }
+  }
+
+  apiUrl: string = this.apiUrlProviderService.apiUrl;
+  SetApiUrl(){
+    this.apiUrlProviderService.apiUrl = this.apiUrl;
+  }
+}

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

@@ -0,0 +1,104 @@
+<!-- <div class="size-full flex justify-center items-center relative">
+  <div class="landscape:w-4/5 portrait:w-full landscape:h-2/3 portrait:h-full landscape:max-w-[60rem] translucid-border landscape:rounded-3xl landscape:backdrop-blur-xl overflow-hidden">
+    <div class="size-full flex portrait:flex-col" style="background-color: color-mix(in srgb, var(--ion-color-light) 20%, transparent 80%);">
+      <div class="shrink-0 w-96 portrait:w-full portrait:h-32 h-full p-3">
+        <div class="rounded-2xl size-full overflow-x-hidden">
+          <ng-content class="size-full"></ng-content>
+        </div>
+      </div>
+      <div class="grow flex items-center justify-center h-full py-3 pr-3 portrait:pl-3">
+        <div class="w-96 h-full flex flex-col items-center justify-center gap-2" *ngIf="frm" [formGroup]="frm">
+
+          <ion-text class="text-5xl my-10 portrait:mt-[-5rem]"> Login </ion-text>
+
+          <ion-card class="w-full backdrop-blur-xl">
+            <ion-card-content>
+              <ion-item lines="none" label="Senha" labelPlacement="stacked" class="rounded-2xl my-3 w-full">
+                <ion-icon name="person" slot="start"></ion-icon>
+                <ion-input placeholder="Usuário / User" formControlName="apelido"></ion-input>
+              </ion-item>
+            </ion-card-content>
+          </ion-card>
+
+          <ion-card class="w-full backdrop-blur-xl"> 
+            <ion-card-content>
+              <ion-item lines="none" class="rounded-2xl my-3 w-full">
+                <ion-icon name="lock-closed" slot="start"></ion-icon>
+                <ion-input type="password" formControlName="senha" placeholder="Senha / Password">
+                  <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+                </ion-input>
+              </ion-item>
+            </ion-card-content>
+          </ion-card>
+
+          <div class="w-full">
+            <a href="">Esqueceu a senha?</a>
+          </div>
+
+          <div class="flex w-full">
+            <ion-button class="rounded-2xl shadow-xl default-transition w-full" expand="block" (click)="Login()" [disabled]="loading">
+              <ion-spinner class="default-transition" [ngClass]="{'-translate-x-12 opacity-0 size-0': !loading, 'mr-2' : loading}" slot="start"></ion-spinner>
+              <ion-icon    class="default-transition" [ngClass]="{'-translate-x-12 opacity-0 size-0':  loading}" name="enter-outline" slot="start" ></ion-icon>
+              <span class="default-transition" > Login </span>
+            </ion-button>
+
+            <ion-button class="shrink-0 aspect-square ml-3" color="dark" hidden>
+              <svg class="size-8" slot="icon-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="64" height="64"><defs><path id="A" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/></defs><clipPath id="B"><use xlink:href="#A"/></clipPath><g transform="matrix(.727273 0 0 .727273 -.954545 -1.45455)"><path d="M0 37V11l17 13z" clip-path="url(#B)" fill="#fbbc05"/><path d="M0 11l17 13 7-6.1L48 14V0H0z" clip-path="url(#B)" fill="#ea4335"/><path d="M0 37l30-23 7.9 1L48 0v48H0z" clip-path="url(#B)" fill="#34a853"/><path d="M48 48L17 24l-4-3 35-10z" clip-path="url(#B)" fill="#4285f4"/></g></svg>
+            </ion-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div> -->
+
+<div #loginContainer class="size-full flex justify-center items-center relative portrait:p-4">
+  <div class="landscape:w-4/5 landscape:h-2/3 landscape:xl:max-w-[60rem] portrait:size-full translucid-border backdrop-blur-xl rounded-3xl overflow-hidden">
+    <div class="size-full flex portrait:flex-col" style="background-color: color-mix(in srgb, var(--ion-color-light) 20%, transparent 80%);">
+      <div class="shrink-0 w-96 portrait:w-full portrait:h-40 landscape:h-full p-2">
+        <div class="size-full rounded-2xl overflow-hidden">
+          <ng-content select="[slot=logo]" class="size-full"></ng-content>
+        </div>
+      </div>
+      <div class="shrink size-full flex flex-col items-center justify-center gap-3 px-10 relative" *ngIf="frm" [formGroup]="frm">
+        <ion-text class="h-24 text-5xl"> Login </ion-text>
+
+        <ion-card class="w-full backdrop-blur-xl">
+          <ion-card-content>
+            <ion-item lines="none" label="Senha" labelPlacement="stacked" class="rounded-2xl my-3 w-full">
+              <ion-icon name="person" slot="start"></ion-icon>
+              <ion-input placeholder="Usuário / User" formControlName="apelido"></ion-input>
+            </ion-item>
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card class="w-full backdrop-blur-xl"> 
+          <ion-card-content>
+            <ion-item lines="none" class="rounded-2xl my-3 w-full">
+              <ion-icon name="lock-closed" slot="start"></ion-icon>
+              <ion-input type="password" formControlName="senha" placeholder="Senha / Password">
+                <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+              </ion-input>
+            </ion-item>
+          </ion-card-content>
+        </ion-card>
+
+        <div class="flex w-full">
+          <ion-button class="transition-all rounded-2xl shadow-xl default-transition w-full" expand="block" (click)="Login()" [disabled]="loading">
+            <ion-spinner class="default-transition" [ngClass]="{'-translate-x-12 opacity-0 size-0': !loading, 'mr-2' : loading}" slot="start"></ion-spinner>
+            <ion-icon    class="default-transition" [ngClass]="{'-translate-x-12 opacity-0 size-0':  loading}" name="enter-outline" slot="start" ></ion-icon>
+            <span class="default-transition"> Login </span>
+          </ion-button>
+
+          <!-- <ion-button class="shrink-0 aspect-square ml-3" color="dark" hidden>
+            <svg class="size-8" slot="icon-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="64" height="64"><defs><path id="A" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/></defs><clipPath id="B"><use xlink:href="#A"/></clipPath><g transform="matrix(.727273 0 0 .727273 -.954545 -1.45455)"><path d="M0 37V11l17 13z" clip-path="url(#B)" fill="#fbbc05"/><path d="M0 11l17 13 7-6.1L48 14V0H0z" clip-path="url(#B)" fill="#ea4335"/><path d="M0 37l30-23 7.9 1L48 0v48H0z" clip-path="url(#B)" fill="#34a853"/><path d="M48 48L17 24l-4-3 35-10z" clip-path="url(#B)" fill="#4285f4"/></g></svg>
+          </ion-button> -->
+        </div>
+
+        <div class="w-full">
+          <ng-content select="[slot=end]"></ng-content>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,97 @@
+import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Component, EventEmitter, HostListener, OnInit, Output, ViewChild } from '@angular/core';
+import { IonicModule, NavController } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
+
+import { EnvironmentService } from '../../services/environment.service';
+import { ApiUrlProviderService } from '../../services/web/api-url-provider.service';
+import { GenericService } from '../../services/generics.service';
+import { AuthService } from '../../services/auth.service';
+
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    IonicModule,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
+  selector: 'login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss'],
+})
+export class DefaultLoginComponent  implements OnInit {
+
+  constructor(
+    private fb: FormBuilder,
+    private genericService: GenericService,
+    private navController: NavController,
+    private authService: AuthService,
+    public apiUrlProviderService: ApiUrlProviderService,
+    public coreService: EnvironmentService,
+    private router: Router
+  ) { 
+    this.genericService.SetTitle("Login");
+  }
+  
+  async ngOnInit() {
+    this.CreateForm();
+
+    if(!this.coreService.environment.production){
+      this.frm.patchValue(this.coreService.environment.defaultCredentials); 
+    }
+    const Token = await this.authService.LoadToken()
+    if(this.authService.isTokenValid(Token)){
+      this.router.navigate(["/"]);
+    }
+  }
+  
+  frm: FormGroup;
+  CreateForm(): void{
+    this.frm = this.fb.group({
+      apelido : [null ,Validators.required],
+      senha   : [null, Validators.required]
+    });
+  }
+
+  loading: boolean;
+  submitted: boolean = false;
+
+  @Output() OnLogin: EventEmitter<any> = new EventEmitter<any>();
+  @ViewChild('loginContainer') loginContainer: HTMLElement;
+
+  @HostListener('window:keydown', ['$event'])
+  async Login($event?: KeyboardEvent): Promise<void>{
+    if($event && $event.key != 'Enter'){ return; }
+    if($event && !this.loginContainer.contains(document.activeElement)){
+      return; // Prevent login if the active element is not within the login container
+    }
+    if(this.loading){ return; }
+
+    this.submitted = true;
+    this.loading   = true;
+   
+    if(!this.frm.valid){
+      this.loading = false;
+      this.genericService.PresentToast("Usuario / Senha não informado!"); return;
+    }
+
+    try{
+      const Token = await this.authService.Login(this.frm.value);
+
+      this.loading = false;
+      this.navController.navigateRoot("/");
+      this.genericService.PresentToast("Logado com sucesso!", "checkmark-circle");
+      this.OnLogin.emit(Token);
+    }
+    catch (status){
+      if(status == 401){
+        this.genericService.PresentToast("Usuário / Senha inválido (s)!");
+      }else{
+        this.genericService.PresentToast("Ocorreu um erro ao realizar o login!");
+      }
+      this.loading = false;
+    }
+  }
+}

package/src/lib/components/main-content/main-content.component.html

@@ -0,0 +1,61 @@
+<div class="size-full flex flex-col" [ngClass]="{'bg-light/50': fullScreen}" #target>
+  <div class="w-full h-14 relative shrink-0">
+    <ion-card class="m-0 rounded-none size-full border-none">
+      <ion-card-content class="p-0 px-2 size-full flex">
+        <div class="w-1/2 h-full flex items-center justify-start">
+          @if (!fullScreen) {
+            <ion-menu-button  [routerLink]="['/']" [autoHide]="true"></ion-menu-button>
+          }
+          <ng-content select="[slot=start]"></ng-content>
+        </div>
+
+        <div class="w-1/2 h-full flex items-center justify-end gap-2">
+          <ng-content select="[slot=end]"></ng-content>
+         
+          <ion-button (click)="FullScreen()" fill="outline" color="dark" size="small" class="size-10 aspect-square  portrait:hidden">
+            <ion-icon slot="icon-only" name="expand"></ion-icon>
+          </ion-button>
+
+          @if (!fullScreen) {
+            <ion-button (click)="userPopover.present($event)" size="small" class="size-10 aspect-square">
+              <span class="uppercase text-white">{{Token ? Token.Nome[0] : ''}}</span>
+            </ion-button>
+            <ion-popover #userPopover [dismissOnSelect]="true" triggerAction="click">
+              <ng-template>
+                <ion-content>
+                  <div class="size-full">
+                    <div class="w-full px-3 flex items-center">
+                      <div class="size-10 shrink-0 aspect-square rounded-2xl text-sm flex items-center justify-center default-transition" style="background-color: var(--ion-color-primary);">
+                        <span class="uppercase text-white">{{Token ? Token.Nome[0] : ''}}</span>
+                      </div>
+                      <div class="grow min-w-10 p-2 justify-center items-center whitespace-nowrap text-ellipsis overflow-hidden block default-transition" [ngClass]="{'opacity-0 w-0': colapsed}">
+                        <span>{{Token ? Token.Nome : ''}}</span> <br>
+                        <ion-text color="secondary" class="text-sm">
+                          &#64;{{Token ? Token.Apelido : ''}}
+                        </ion-text>
+                      </div>
+                    </div>
+                    <div class="w-full">
+                      <ng-content class="size-full" select="[slot=user-popover]"></ng-content>
+                    </div>
+                    <div class="w-full px-3 py-2 translucid-border !border-x-0 !border-b-0 flex items-center justify-between">
+                      <ion-text> Log Out </ion-text>
+                      <ion-button (click)="authService.Loggout()" class="size-10 shrink-0" size="small" color="danger">
+                        <ion-icon slot="icon-only" name="exit-outline"></ion-icon> 
+                      </ion-button>
+                    </div>
+                  </div>
+                </ion-content>
+              </ng-template>
+            </ion-popover>
+          }
+        </div>
+      </ion-card-content>
+    </ion-card>
+  </div>
+  <div class="size-full relative p-2 bg-light">
+    <div class="size-full relative rounded-2xl bg-primary/30 content-shadow overflow-hidden">
+      <ng-content></ng-content>
+    </div>
+  </div>
+</div>

package/src/lib/components/main-content/main-content.component.ts

@@ -0,0 +1,55 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { RouterLinkWithHref } from '@angular/router';
+import { DrawerComponent } from '../drawer/drawer.component';
+import { AuthService } from '../../services/auth.service';
+
+@Component({
+  standalone: true,
+  imports: [ CommonModule, IonicModule, RouterLinkWithHref ],
+  selector: 'main-content',
+  templateUrl: './main-content.component.html',
+  styleUrls: ['./main-content.component.scss'],
+})
+export class MainContentComponent  implements OnInit {
+
+  @Input() colapsed: boolean = false;
+  @Input() drawerComponent: DrawerComponent;
+
+  constructor(
+    public authService: AuthService
+  ) { }
+
+  Token: any;
+  ngOnInit(): void {
+    this.authService.LoadToken().then((res) => {
+      this.Token = res;
+    });
+  }
+
+  get fullScreen(): boolean { 
+    if(document.fullscreenElement != null){
+      return true;
+    }
+    return false; 
+  };
+  @ViewChild('target') FullScreenConteiner;
+  FullScreen(): void{
+    if(!this.fullScreen){
+      const elem = this.FullScreenConteiner.nativeElement;
+  
+      if (elem.requestFullscreen) {
+        elem.requestFullscreen();
+      } else if (elem.msRequestFullscreen) {
+        elem.msRequestFullscreen();
+      } else if (elem.mozRequestFullScreen) {
+        elem.mozRequestFullScreen();
+      } else if (elem.webkitRequestFullscreen) {
+        elem.webkitRequestFullscreen();
+      }
+    }else{
+      document.exitFullscreen()
+    }
+  }
+}

package/src/lib/components/stepper/step/step.component.html

@@ -0,0 +1,11 @@
+<div class="px-1 flex flex-col items-center justify-center text-center animated">
+  <div [ngClass]="{'selected': selected}" class="default-transition min-h-8 min-w-8 bg-red-400 flex items-center justify-center rounded-2xl step">
+    <div class="wrapper"><ng-content select="ion-icon, ion-text"></ng-content></div>
+    <div class="default">
+      {{index + 1}}
+    </div>
+  </div>
+  
+  <ion-text> {{label}} </ion-text>
+  <ion-progress-bar [color]="selected ? 'secondary' : 'primary'" class="h-2 ease-in-out" [value]="_fill"></ion-progress-bar>
+</div>

package/src/lib/components/stepper/step/step.component.ts

@@ -0,0 +1,44 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { StepperComponent } from '../stepper.component';
+
+@Component({
+  selector: 'step',
+  templateUrl: './step.component.html',
+  styleUrls: ['./step.component.scss'],
+})
+export class StepComponent  implements OnInit {
+  
+  @Input()        label   : string = "Label";
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  parent: StepperComponent;
+
+  get index(): number{ 
+    if(this.parent && this.parent.lstSteps){
+      return this.parent.lstSteps.toArray().indexOf(this);
+    }
+    return 0;
+  }
+  
+  get fill(): boolean{
+    if(this.parent){
+      return this.parent.lstSteps.toArray().indexOf(this) == this.parent._model;
+    }
+    return false;
+  };
+  
+  get selected(): boolean{
+    if(this.parent){
+      return this.parent.lstSteps.toArray().indexOf(this) <= this.parent._model;
+    }
+    return false;
+  };
+
+  get _fill(){
+    return this.fill ? 1 : 0; 
+  }
+}

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

@@ -0,0 +1,3 @@
+<div class="flex w-full justify-evenly">
+    <ng-content selector="step" class="grow"></ng-content>
+</div>