@sapphire-ion/framework 1.2.62 → 1.3.1

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

@@ -0,0 +1,145 @@
+<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) {
+            <div #anchor>
+              <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>
+            </div>
+            <sion-popover #userPopover [anchor]="anchor" [flip]="false" width="13rem">
+              <div class="w-full flex flex-col overflow-hidden">
+                <div class="w-full flex p-2 gap-2 overflow-hidden">
+                  <div class="size-10 shrink-0 aspect-square rounded-2xl text-sm flex items-center justify-center bg-primary">
+                    <span class="uppercase text-white">{{Token ? Token.Nome[0] : ''}}</span>
+                  </div>
+
+                  <div class="shrink-0 w-full flex flex-col justify-center items-start overflow-hidden text-sm">
+                    <span class="truncate"> {{Token ? Token.Nome : ''}} </span>
+                    <span class="truncate text-secondary"> &#64;{{Token ? Token.Apelido : ''}} </span>
+                  </div>
+                </div>
+
+                <div class="w-full">
+                  <ng-content class="size-full" select="[slot=user-popover]"></ng-content>
+                </div>
+
+                <div class="w-full p-1 !pb-0 translucid-border !border-x-0 !border-b-0">
+                  <div class="rounded-xl flex gap-2 items-center justify-start default-transition py-1 px-2">
+                    <ion-icon name="contrast"></ion-icon>
+                    <ion-text> Tema </ion-text>
+                  </div>
+
+                  <div class="flex flex-col pl-4">
+                    <ion-radio-group alignment="start" [allowEmptySelection]="false" [value]="Theme" (ionChange)="SetTheme($event.detail.value)">
+                      <ion-item class="bg-transparent" lines="full">
+                        <ion-icon name="cog" slot="start"></ion-icon>
+                        <ion-radio class="w-full" [value]="0">Sistema</ion-radio>
+                      </ion-item>
+                      <ion-item class="bg-transparent" lines="full">
+                        <ion-icon name="sunny" slot="start"></ion-icon>
+                        <ion-radio class="w-full" [value]="1">Claro</ion-radio>
+                      </ion-item>
+                      <ion-item class="bg-transparent" lines="none">
+                        <ion-icon name="moon" slot="start"></ion-icon>
+                        <ion-radio class="w-full" [value]="2">Escuro</ion-radio>
+                      </ion-item>
+                    </ion-radio-group>
+
+
+                    <!-- <div class="w-full p-1 translucid-border !border-x-0 !border-b-0 overflow-hidden">
+                      <div class="rounded-xl flex gap-2 items-center justify-start cursor-pointer hover:bg-medium/30 default-transition py-1 px-2">
+                        <ion-checkbox [checked]="Theme == 0" (ionChange)="SetTheme(0)" ></ion-checkbox>
+                        <ion-icon name="cog"></ion-icon>
+                        <ion-text> Sistema </ion-text>
+                      </div>
+                    </div>
+                    <div class="w-full p-1 translucid-border !border-x-0 !border-b-0 overflow-hidden">
+                      <div class="rounded-xl flex gap-2 items-center justify-start cursor-pointer hover:bg-medium/30 default-transition py-1 px-2">
+                        <ion-checkbox [checked]="Theme == 1" (ionChange)="SetTheme(1)" ></ion-checkbox>
+                        <ion-icon name="sunny"></ion-icon>
+                        <ion-text> Claro </ion-text>
+                      </div>
+                    </div>
+                    <div class="w-full p-1 translucid-border !border-x-0 !border-b-0 overflow-hidden">
+                      <div class="rounded-xl flex gap-2 items-center justify-start cursor-pointer hover:bg-medium/30 default-transition py-1 px-2">
+                        <ion-checkbox [checked]="Theme == 2" (ionChange)="SetTheme(2)" ></ion-checkbox>
+                        <ion-icon name="moon"></ion-icon>
+                        <ion-text> Escuro </ion-text>
+                      </div>
+                    </div> -->
+                  </div>
+                </div>
+
+
+                <div class="w-full p-1 translucid-border !border-x-0 !border-b-0">
+                  <div (click)="authService.Loggout()" class="rounded-xl flex gap-2 cursor-pointer items-center justify-start hover:bg-medium/10 default-transition py-1 px-2">
+                    <ion-icon color="danger" name="exit"></ion-icon>
+                    <ion-text> Log Out </ion-text>
+                  </div>
+
+                  <!-- <ion-text> Log Out </ion-text>
+                  <ion-button (click)="authService.Loggout()" class="size-8 shrink-0" size="small" fill="clear" color="danger">
+                    <ion-icon slot="icon-only" name="exit-outline"></ion-icon> 
+                  </ion-button> -->
+                </div>
+              </div>
+
+              <!-- <div class="size-full">
+                <div class="w-full p-1 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 p-1 px-2 translucid-border !border-x-0 !border-b-0 flex items-center justify-between">
+                  <div class="hover:bg-medium/30 default-transition size-full">
+                    <ion-button color="dark" fill="clear" size="small" class="rounded-xl w-full text-left overflow-hidden">
+                      <ion-icon slot="start" name="contrast"></ion-icon>
+                      <ion-label class="text-sm">Tema</ion-label>
+                    </ion-button>
+                  </div>
+                </div>
+                <div class="w-full p-1 px-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-8 shrink-0" size="small" fill="clear" color="danger">
+                    <ion-icon slot="icon-only" name="exit-outline"></ion-icon> 
+                  </ion-button>
+                </div>
+              </div> -->
+            </sion-popover>
+          }
+        </div>
+      </ion-card-content>
+    </ion-card>
+  </div>
+  <div class="size-full relative p-2 pt-0 bg-light">
+    <div class="size-full relative rounded-2xl content-shadow overflow-hidden {{backdrop}}" style="--shadow-color: {{shadowColor}}">
+      <ng-content></ng-content> 
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,93 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { RouterLinkWithHref } from '@angular/router';
+import { Preferences } from '@capacitor/preferences';
+
+import { DrawerComponent } from '../drawer/drawer.component';
+import { AuthService } from '../../services/auth.service';
+import { SIonPopoverModule } from '../popover/sion-popover.module';
+
+@Component({
+  standalone: true,
+  imports: [ CommonModule, IonicModule, RouterLinkWithHref, SIonPopoverModule ],
+  selector: 'main-content',
+  templateUrl: './main-content.component.html',
+  styleUrls: ['./main-content.component.scss'],
+})
+export class MainContentComponent  implements OnInit {
+
+  @Input() backdrop: string = 'bg-primary/30';
+  @Input() shadowColor: string = 'color-mix(in srgb, var(--ion-color-primary) 15%, transparent)';
+
+  @Input() colapsed: boolean = false;
+  @Input() drawerComponent: DrawerComponent;
+
+  constructor(
+    public authService: AuthService,
+  ) { }
+
+  Token: any;
+  async ngOnInit(): Promise<void> {
+    this.Token = await this.authService.LoadToken();
+    this.Theme = Number((await Preferences.get({ key: 'theme' })).value) as Theme;
+
+    this.SetTheme(this.Theme);
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+      this.SetTheme(this.Theme);
+    });
+  }
+
+  Theme: Theme = Theme.System;
+  async SetTheme(theme: Theme) {
+    this.Theme = theme;
+    await Preferences.set({ key: 'theme', value: this.Theme.toString() });
+    if (this.Theme === Theme.System) {
+      var matches = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      if (matches) {
+        document.body.classList.add('dark');
+      } else {
+        document.body.classList.remove('dark');
+      }
+    }
+    else 
+    if (this.Theme === Theme.Light) {
+      document.body.classList.remove('dark');
+    } else 
+    if (this.Theme === Theme.Dark) {
+      document.body.classList.add('dark'); 
+    }
+  }
+
+  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()
+    }
+  }
+}
+
+enum Theme {
+  System = 0,
+  Light  = 1,
+  Dark   = 2,
+}

package/src/lib/components/popover/sion-popover/sion-popover.component.html

@@ -0,0 +1,21 @@
+<div #popoverWrapper 
+  class="popover-wrapper translucid-border"
+  [style.height]="height"
+  [style.width]="width"
+  [ngClass]="{
+      'bg-light'        : fill == 'solid',
+      'bg-transparent'  : fill == 'outline',
+      'bg-light/90'     : fill == 'blur',
+      '!border-0'       : fill == 'clear',
+    }"
+> 
+  <div #popoverArrow class="popover-arrow size-4 translucid-border"
+    [ngClass]="{
+      'bg-light'        : fill == 'solid',
+      'bg-transparent'  : fill == 'outline',
+      'bg-light/90'     : fill == 'blur',
+      '!border-0'       : fill == 'clear',
+    }"
+  ></div>
+  <ng-content #content></ng-content>
+</div>

package/src/lib/components/popover/sion-popover/sion-popover.component.ts

@@ -0,0 +1,182 @@
+import { AfterViewInit, Component, ElementRef, EmbeddedViewRef, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output, TemplateRef, ViewChild, ViewContainerRef, ViewRef } from '@angular/core';
+import { autoUpdate, computePosition, ComputePositionReturn, flip, limitShift, offset, Placement, shift, arrow } from '@floating-ui/dom';
+import { Timeout } from '../../../services/utils.service';
+
+type Fill = 'solid' | 'outline' | 'blur' | 'clear';
+
+@Component({
+  selector: 'sion-popover',
+  templateUrl: './sion-popover.component.html',
+  styleUrls: ['./sion-popover.component.scss'],
+})
+export class SIonPopoverComponent implements AfterViewInit, OnDestroy {
+
+  @Input() fill: Fill = 'blur';
+  @Input() arrow: boolean = true;
+  @Input() flip : boolean = true;
+
+
+  @Input() placement: Placement = 'bottom';
+  @Input() height: string = 'auto';
+  @Input() width: string = 'auto';
+
+
+  @Output() onWillPresent: EventEmitter<void> = new EventEmitter<void>();
+  @Output() onDidPresent: EventEmitter<void> = new EventEmitter<void>();
+
+  @Output() onWillDismiss: EventEmitter<void> = new EventEmitter<void>();
+  @Output() onDidDismiss: EventEmitter<void> = new EventEmitter<void>();
+
+  @Input() anchor: HTMLElement | undefined = undefined;
+
+  constructor(
+    private ngZone: NgZone
+  ) { }
+
+  @ViewChild('popoverWrapper' , { read: ElementRef }) contentContainer: ElementRef<HTMLDivElement>;
+  
+  ngAfterViewInit() {
+    //TODO: Use Renderer2 to add event listeners for better Angular compatibility when updating to Angular 19
+    this.ngZone.runOutsideAngular(() => {
+      this.documentClickListener = (event: MouseEvent) => {
+        // Run back inside Angular's zone when handling the event
+        this.ngZone.run(() => {
+          if(!this._instance){ return;}
+          if (
+            !this._instance.contains(event.target as Node) &&
+            !this.anchor.contains(event.target as Node)
+          ) {
+            this.dismiss();
+          }
+        });
+      };
+      
+      // Use the native DOM API directly with capture phase
+      document.addEventListener('click', this.documentClickListener, true);
+    });
+  }
+  documentClickListener: (event: MouseEvent) => void;
+  viewRef?: ViewRef;
+
+  private _embeddedView?: EmbeddedViewRef<any> | undefined;
+  private get _instance(): HTMLElement | undefined {
+    return this.contentContainer?.nativeElement;
+  }
+
+  get arrowEl(): HTMLElement | undefined {
+    return this._instance.querySelector('.popover-arrow') as HTMLElement;
+  }
+  
+  private cleanupAutoUpdate?: () => void;
+  public state: POPOVER_STATE = POPOVER_STATE.IDLE;
+  public async present(event?: Event): Promise<void> {
+    if(this.state != POPOVER_STATE.IDLE) { return; }
+    document.body.appendChild(this._instance);
+
+    this.onWillPresent.emit();
+    
+    this.state = POPOVER_STATE.PRESENTING;
+    const refEl   = this.anchor ? this.anchor : event.target as HTMLElement;
+    const arrowEl = this.arrowEl;
+
+    await this.update(refEl, arrowEl)
+    this._instance.classList.add('show');
+    this.cleanupAutoUpdate = autoUpdate(refEl, this._instance, async () => this.update(refEl, arrowEl));
+    
+    this.state = POPOVER_STATE.VISIBLE;
+    this.onDidPresent.emit();
+  }
+
+  private async update(refEl: HTMLElement, arrowEl: HTMLElement): Promise<void> {
+    const computePositionReturn: ComputePositionReturn = await this.GetComputePositionReturn(refEl, this._instance, arrowEl);
+    this.HandleComputePositionReturn(computePositionReturn, arrowEl);
+  }
+
+  public async dismiss(): Promise<void> {
+    if(this.state == POPOVER_STATE.IDLE) { return; }
+    
+    if(this.cleanupAutoUpdate) {
+      this.cleanupAutoUpdate();
+      this.cleanupAutoUpdate = undefined;
+    }
+    this.onWillDismiss.emit();
+    this.state = POPOVER_STATE.DISMISSING;
+    this._instance.classList.remove('show');
+    await Timeout(200);
+    this._instance?.remove();
+    this.state = POPOVER_STATE.IDLE;
+    this.onDidDismiss.emit();
+  }
+
+  HandleComputePositionReturn(computePositionReturn: ComputePositionReturn, arrowEl: HTMLElement): void {
+    Object.assign(this._instance.style, {
+      left: `${computePositionReturn.x}px`,
+      top:  `${computePositionReturn.y}px`,
+      width : this.width,
+      height: this.height,
+      position: 'absolute',
+    });
+    if(computePositionReturn.middlewareData.arrow){
+      const { x: arrowX, y: arrowY } = computePositionReturn.middlewareData.arrow;
+      const position = computePositionReturn.placement.split('-')[0];
+      const staticSide = STATIC_SIDES[position];
+      Object.assign(arrowEl.style, {
+        left: arrowX != null ? `${arrowX}px` : '',
+        top : arrowY != null ? `${arrowY}px` : '',
+        right : '',
+        bottom: '',
+        [staticSide]: `-7px`,
+      });
+      arrowEl.style.setProperty(`--rotation`, ROTATIONS[position]);
+    }
+  }
+
+  ngOnDestroy(): void {
+    if(this._instance) {
+      this._instance?.remove();
+    }
+    if(this._embeddedView) {
+      this._embeddedView.destroy();
+      this._embeddedView = undefined;
+    }
+
+    if (this.documentClickListener) {
+      document.removeEventListener('click', this.documentClickListener, true);
+    }
+    if (this.viewRef) {
+      this.viewRef.destroy();
+      this.viewRef = undefined;
+    }
+  }
+
+  async GetComputePositionReturn(refEl: HTMLElement, popEl: HTMLElement, arrowEl: HTMLElement): Promise<ComputePositionReturn> {
+    return await computePosition(refEl, popEl, {
+      placement: this.placement,
+      middleware: [ 
+        offset(10), 
+        this.flip  ? flip({ crossAxis: false }) : undefined, 
+        shift({ limiter: limitShift(), padding: 5 }), 
+        this.arrow ? arrow({ element: arrowEl, padding: 10 }) : undefined,
+      ].filter(p => p),
+    });
+  }
+}
+
+enum POPOVER_STATE{
+  IDLE       = 1,
+  PRESENTING = 2,
+  DISMISSING = 3,
+  VISIBLE    = 4
+}
+const STATIC_SIDES = {
+  top: "bottom",
+  right: "left",
+  bottom: "top",
+  left: "right"
+};
+const ROTATIONS = {
+  bottom: "135deg",
+  top: "315deg",
+  left: "225deg",
+  right: "45deg",
+}

package/src/lib/components/popover/sion-popover.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SIonPopoverComponent } from './sion-popover/sion-popover.component';
+import { OverlayModule } from '@angular/cdk/overlay';
+@NgModule({
+  declarations: [ SIonPopoverComponent  ],
+  exports: [ SIonPopoverComponent ],
+  imports: [
+    CommonModule, OverlayModule
+  ]
+})
+export class SIonPopoverModule { }

package/src/lib/components/sion-card/sion-card.component.html

@@ -0,0 +1,12 @@
+<ion-card class="m-0 size-full">
+  <ion-card-content class="size-full p-0">
+    <div class="size-full {{backdrop}} flex flex-col overflow-hidden">
+      <div class="flex items-center {{justify}} p-2 min-h-8 shrink-0">
+        <ng-content select="[slot=header]"></ng-content>
+      </div>
+      <div class="{{background}} size-full rounded-t-2xl overflow-hidden">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  </ion-card-content>
+</ion-card>

package/src/lib/components/sion-card/sion-card.component.ts

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+
+@Component({
+  selector: 'sion-card',
+  standalone: true,
+  imports: [ CommonModule, IonicModule ],
+  templateUrl: './sion-card.component.html',
+  styleUrls: ['./sion-card.component.scss'],
+})
+export class SionCardComponent  implements OnInit {
+
+
+  @Input() background: string = 'bg-light';
+  @Input() backdrop: string = 'bg-primary/30';
+  @Input() justify: string = 'justify-center';
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

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.value();
+    }
+    return false;
+  };
+  
+  get selected(): boolean{
+    if(this.parent){
+      return this.parent.lstSteps.toArray().indexOf(this) <= this.parent.value();
+    }
+    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 select="step" class="grow"></ng-content>
+</div>

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

@@ -0,0 +1,37 @@
+import { AfterContentInit, Component, ContentChildren, QueryList } from '@angular/core';
+import { StepComponent } from './step/step.component';
+import { CustomInput } from '../inputs/custom-input';
+import { InputProviderFactory } from '../inputs/input-provider-factory';
+
+@Component({
+  selector: 'stepper',
+  templateUrl: './stepper.component.html',
+  styleUrls: ['./stepper.component.scss'],
+  providers: InputProviderFactory.GetProviders(StepperComponent)
+})
+export class StepperComponent extends CustomInput<any> implements AfterContentInit  {
+  override setFocus(event: MouseEvent): void {
+    // throw new Error('Method not implemented.');
+  }
+
+  constructor() { super(); }
+  ngAfterContentInit(): void {
+    if(this.lstSteps){
+      this.lstSteps.filter(p => !p.parent).forEach(comp => { comp.parent = this; });
+    }
+  }
+
+  @ContentChildren(StepComponent) lstSteps : QueryList<StepComponent>;
+
+  override writeValue(obj: string): void | Promise<void> {
+    this.value.set(obj);
+    this.runValidation();
+  }
+
+  override SetValue(obj: any): void {
+    this.value.set(obj);
+    this.ngAfterContentInit();
+    this.runValidation();
+    this.propagateChange(obj);
+  }
+}

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

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { StepComponent } from './step/step.component';
+import { StepperComponent } from './stepper.component';
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+  declarations: [ StepComponent, StepperComponent ],
+  exports: [ StepComponent, StepperComponent ],
+  imports: [
+    CommonModule,
+    IonicModule
+  ]
+})
+export class StepperModule { }

package/src/lib/components/tabs/tab/tab.component.html

@@ -0,0 +1,8 @@
+<div [ngClass]="{'-translate-x-full opacity-0': !active,
+                 '!relative': relative }" class="default-transition overflow-hidden max-h-full size-full absolute top-0 left-0">
+  @if(route && active){
+    <router-outlet class="size-full"></router-outlet>
+  }@else {
+    <ng-content></ng-content>
+  }
+</div>

package/src/lib/components/tabs/tab/tab.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, ViewChild, ViewContainerRef } from "@angular/core";
+import { RouterOutlet } from "@angular/router";
+import { Utils } from "../../../services/utils.service";
+
+@Component({
+  selector: 'tab',
+  templateUrl: './tab.component.html',
+  styleUrls: ['./tab.component.scss'],
+})
+export class TabComponent {
+  @Input() id   : string  = null;
+
+  @Input() label: string  = "Label";
+  /** Icone da aba @link https://ionic.io/ionicons */
+  @Input() name : string  = "warning";
+  /** Rota aba, quando náo informada irá mostrar o conteudo do componente */
+  @Input() public route : string | null = null;
+  @Input() active: boolean = false;
+  @Input() relative: boolean = false;
+
+  constructor() { }
+
+  @ViewChild('placeToRender', {read: ViewContainerRef}) placeToRender: ViewContainerRef;
+  routerOutlet: RouterOutlet | null = null;
+
+  guid = Utils.GenerateGUID();
+}
+

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

@@ -0,0 +1,14 @@
+<div class="flex flex-col size-full">
+  <div class="h-10 w-full flex px-3 mask-x/3 overflow-x-auto">
+    @for (tab of lstTabs; track $index) {
+      <div [routerLink]="tab.route ? '.' + tab.route : GetElse()" [ngClass]="{'selected': tab.active}" class="default-transition !translucid-background translucid-border tab-selector !border-b-0 animated-from-right whitespace-nowrap" (click)="SetActiveTab(tab)">
+        <ion-text class="mx-auto" [color]="tab.active ? 'dark' : ''">
+          <ion-icon [name]="tab.name" class="align-sub mr-1"></ion-icon> {{tab.label}}
+        </ion-text>
+      </div>
+    }
+  </div>
+  <div class="translucid-border tab-content !overflow-hidden relative">
+    <ng-content></ng-content>
+  </div>
+</div>