@sapphire-ion/framework 1.2.41 → 1.2.43

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

@@ -0,0 +1,61 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+import { RouterLink, RouterLinkWithHref, RouterModule, RouterOutlet } from '@angular/router';
+
+import { NgVarDirective } from '../../directives/ng-var.directive';
+import { InputsModule } from '../inputs/inputs.module';
+
+import { LoadingComponent } from '../loading/loading.component';
+import { DefaultListComponent } from './default-list/default-list.component';
+import { DefaultViewComponent } from './default-view/default-view.component';
+import { HeaderListComponent } from './default-list/header-list/header-list.component';
+import { HeaderViewComponent } from './default-view/header-view/header-view.component';
+import { DefaultTableComponent } from './default-table/default-table.component';
+import { DefaultPaginationComponent } from './default-pagination/default-pagination.component';
+import { ThFilterComponent } from './default-table/th-filter/th-filter.component';
+import { SIonPopoverModule } from '../popover/sion-popover.module';
+import { ContentBlockComponent } from '../content-block/content-block.component';
+import { CdkDragPlaceholder } from "@angular/cdk/drag-drop";
+
+const lstComponents = [
+  HeaderListComponent,
+  DefaultListComponent,
+
+  DefaultViewComponent,
+  HeaderViewComponent,
+  DefaultTableComponent,
+  DefaultPaginationComponent,
+  ThFilterComponent
+]
+
+/** Modulo parão, inclui os seguiintes componentes:
+ *  - HeaderListComponent,
+    - DefaultListComponent,
+    - DefaultViewComponent,
+    - HeaderViewComponent,
+    - DefaultTableComponent,
+    - DefaultPaginationComponent,
+ */
+@NgModule({
+  declarations: [...lstComponents],
+  exports     : [...lstComponents],
+  imports: [
+    IonicModule,
+    CommonModule,
+    InputsModule,
+    ReactiveFormsModule,
+    RouterLinkWithHref,
+    FormsModule,
+    RouterModule,
+    RouterOutlet,
+    RouterLink,
+    LoadingComponent,
+    NgVarDirective,
+    SIonPopoverModule,
+    ContentBlockComponent,
+    CdkDragPlaceholder
+]
+})
+export class DefaultModule { }

package/src/lib/components/default-page/default.page.html

@@ -0,0 +1,63 @@
+<ion-content [fullscreen]="true">
+  <div class="wrapper">
+    <ion-breadcrumbs>
+      <ion-breadcrumb [routerLink]="[null]">
+        <ion-icon slot="start" name="home"></ion-icon> Inicio
+      </ion-breadcrumb>
+    </ion-breadcrumbs>
+  
+    <ion-card>
+      <ion-card-content class="flex flex-col items-center justify-center !p-6">
+        <div class="w-full shrink-0 text-center">
+          @if(lstImage){
+            @for (item of lstImage; track $index) {
+              <ion-img [class]="item.classes" [src]="item.src" (ion-error)="lstImage"></ion-img>
+            }
+          }
+          @else {
+            <ion-text class="text-8xl font-poppins w-full"> {{title}} </ion-text>
+          }
+        </div>
+
+        <div class="overflow-hidden p-2 w-full relative">
+          <loading [type]="3" [loading]="loading"></loading>
+          <div class="size-full flex flex-wrap portrait:!grid gap-2">
+            @for (item of lstMenu; track item; let i = $index) {
+              @if(item.type == "Menu"){
+                <ion-button fill="outline" class="grow min-w-fit" [routerLink]="[item.route]">
+                  <ion-icon slot="start" [name]="item.icon"></ion-icon> 
+                  {{useTranslation ? (TranslationModule.Permissao + item.id | translate) : item.title}}
+                </ion-button>
+              }
+              @if(item.type == "MenuGroup"){
+                <ion-button fill="outline" class="grow min-w-fit" (click)="popover.present($event)">
+                  <ion-icon slot="start" [name]="item.icon"></ion-icon> 
+                  {{useTranslation ? (TranslationModule.PermissaoGrupo + item.id | translate) : item.title}}
+                </ion-button>
+
+                <ion-popover #popover class="overflow-y-auto" [dismissOnSelect]="true" triggerAction="click">
+                  <ng-template>
+                    <ion-list class="no-outer-border">
+                      <ion-item class="bg-transparent" (click)="SetTitle(menu)" *ngFor="let menu of item.lstMenu" [routerLink]="['./' + menu.route]" lines="none" detail="false" routerLinkActive="selected">
+                        <ion-icon [name]="menu.icon" slot="start"></ion-icon> 
+                        <ion-label> 
+                          {{useTranslation ? (TranslationModule.Permissao + menu.id | translate) : menu.title}}  
+                        </ion-label>
+                      </ion-item>
+                    </ion-list>
+                  </ng-template>
+                </ion-popover>
+              }
+            }
+          </div>
+        </div>
+
+        <!-- <div class="!overflow-y-auto w-full portrait:grow relative">
+          <loading [type]="3" [loading]="loading"></loading>
+          <div class="flex flex-wrap items-start justify-start mt-4 portrait:!grid portrait:!grid-cols-1"> 
+          </div>
+        </div> -->
+      </ion-card-content>
+    </ion-card>
+  </div>
+</ion-content>

package/src/lib/components/default-page/default.page.ts

@@ -0,0 +1,84 @@
+import { ActivatedRoute, RouterLinkWithHref } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { firstValueFrom } from 'rxjs';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+
+import { RouteProviderService } from '../../services/route/route.provider.service';
+import { EnvironmentService } from '../../services/environment.service';
+import { LoadingComponent } from '../loading/loading.component';
+import { GenericService } from '../../services/generic.service';
+import { InputsModule } from '../inputs/inputs.module';
+import { Menu } from '../drawer/menu';
+
+/** Pagina Default - mostra os botões de rotas horizontalmente - componente padrão */
+@Component({
+  standalone: true,
+  selector: 'app-default',
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    InputsModule,
+    RouterLinkWithHref,
+    LoadingComponent,
+    TranslateModule,
+  ],
+  templateUrl: './default.page.html',
+  styleUrls: ['./default.page.scss'],
+})
+export class DefaultPage implements OnInit {
+
+  useTranslation: boolean = false;
+  TranslationModule: any = {
+    Permissao     : 'Entities.Permissao.',
+    PermissaoGrupo: 'Entities.PermissaoGrupo.'
+  };
+
+  constructor(
+    private route: ActivatedRoute,
+    private coreService: EnvironmentService,
+    private genericService: GenericService,
+    private routeProviderService: RouteProviderService 
+  ) { 
+  }
+  
+  title: string = this.coreService.environment.applicationName;
+  loading: boolean;
+  lstMenu: Menu[] = [];
+
+  lstImage: DefaultPageImage[] = null;
+
+  async ngOnInit(): Promise<void> {
+    this.loading = true;
+    
+    const conf = await firstValueFrom(this.route.data) as DefaultPageConfiguration;
+
+    this.lstImage = Array.isArray(conf.image) ? conf.image : 
+                                   conf.image ? [conf.image] : undefined;
+
+    this.lstMenu       = await firstValueFrom(this.routeProviderService.GetData());
+    this.loading = false;
+  }
+
+  SetTitle(item: Menu){
+    this.genericService.SetTitle(item.title);
+  }
+}
+
+export class DefaultPageConfiguration{
+  constructor(
+    public image: DefaultPageImage | DefaultPageImage[] | null = null,
+    public useTranslation: boolean = false
+  ){
+  }
+}
+
+export class DefaultPageImage {
+  constructor(
+    public src: string | null = null,
+    public classes: string = ''
+  ){}
+}

package/src/lib/components/drag-drop-file/drag-drop-file.directive.ts

@@ -0,0 +1,44 @@
+import { ContentChild, Directive, ViewChild } from '@angular/core';
+import { Output, EventEmitter, HostBinding, HostListener } from '@angular/core';
+import { DragDropOverlayComponent } from './drag-drop-overlay/drag-drop-overlay.component';
+
+@Directive({
+  selector: '[DragDropFile]'
+})
+export class DragDropFileDirective {
+
+  constructor() { }
+
+  @HostBinding('class.fileOver') fileOver: boolean;
+  @Output() fileDropped = new EventEmitter<File[]>();
+
+  @ContentChild(DragDropOverlayComponent) dragDropOverlay: DragDropOverlayComponent 
+
+  // Dragover listener
+  @HostListener('dragover', ['$event']) onDragOver(evt: DragEvent) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    this.fileOver = true;
+    this.dragDropOverlay.fileOver = true;
+  }
+
+  // Dragleave listener
+  @HostListener('dragleave', ['$event']) public onDragLeave(evt: DragEvent) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    this.fileOver = false;
+    this.dragDropOverlay.fileOver = false;
+  }
+  
+  // Drop listener
+  @HostListener('drop', ['$event']) public onDrop(evt: DragEvent) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    this.fileOver = false;
+    this.dragDropOverlay.fileOver = false;
+    let files = evt.dataTransfer.files;
+    if (files.length > 0) {
+      this.fileDropped.emit(Array.from(files));
+    }
+  }
+}

package/src/lib/components/drag-drop-file/drag-drop-file.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DragDropFileDirective } from './drag-drop-file.directive';
+import { DragDropOverlayComponent } from './drag-drop-overlay/drag-drop-overlay.component';
+import { IonicModule } from '@ionic/angular';
+
+const values = [
+  DragDropFileDirective,
+  DragDropOverlayComponent
+]
+
+
+@NgModule({
+  declarations: [ ...values ],
+  exports     : [ ...values ],
+  imports: [
+    CommonModule,
+    IonicModule
+  ]
+})
+export class DragDropFileModule { }

package/src/lib/components/drag-drop-file/drag-drop-overlay/drag-drop-overlay.component.html

@@ -0,0 +1,5 @@
+<div class="absolute top-0 left-0 size-full z-50 p-4 pointer-events-none" [ngClass]="{'fileOver': fileOver}">
+  <div class="border-4 border-dashed border-transparent default-transition rounded-2xl size-full flex items-center justify-center">
+    <ion-icon class="text-9xl text-transparent" name="cloud-upload"></ion-icon>
+  </div>
+</div>

package/src/lib/components/drag-drop-file/drag-drop-overlay/drag-drop-overlay.component.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+
+@Component({
+  selector: 'drag-drop-overlay',
+  templateUrl: './drag-drop-overlay.component.html',
+  styleUrls: ['./drag-drop-overlay.component.scss'],
+})
+export class DragDropOverlayComponent  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+  fileOver: boolean;
+}

package/src/lib/components/drawer/default-drawer-end/default-drawer-end.component.html

@@ -0,0 +1,12 @@
+<div class="w-full default-transition flex" [ngClass]="{'!w-16': colapsed}">
+  <div class="w-10 shrink-0 aspect-square rounded-2xl 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>
+  </div>
+
+  <ion-button (click)="Loggout()" class="size-10 shrink-0" size="small" color="danger">
+    <ion-icon slot="icon-only" name="exit-outline"></ion-icon> 
+  </ion-button>
+</div>

package/src/lib/components/drawer/default-drawer-end/default-drawer-end.component.ts

@@ -0,0 +1,35 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { RouterLinkWithHref } from '@angular/router';
+import { IonicModule } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+import { AuthService } from '../../../services/auth.service';
+
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    IonicModule,
+    RouterLinkWithHref,
+  ],
+  selector: 'default-drawer-end',
+  templateUrl: './default-drawer-end.component.html',
+  styleUrls: ['./default-drawer-end.component.scss'],
+})
+export class DefaultDrawerEndComponent  implements OnInit {
+
+  constructor(
+    public authService: AuthService
+  ) { }
+
+  @Input() colapsed: boolean = false;
+
+  Token: any;
+  ngOnInit(): void {
+    this.authService.LoadToken().then((res) => {
+      this.Token = res;
+    })
+  }
+
+
+  Loggout(): void { this.authService.Loggout(); }
+}

package/src/lib/components/drawer/drawer-group/drawer-group.component.html

@@ -0,0 +1,79 @@
+<div class="size-full flex flex-col  verflow-hidden">
+  <div class="w-full text-center">
+    <!-- <ion-item class="bg-inactive bg-active" lines="none" style="--border-radius: 1rem">
+      <ion-label class="text-center">
+        <ion-icon class="text-2xl" [name]="MenuGroup.icon"></ion-icon> <br>
+        <ion-text class="text-lg">
+          {{useTranslation ? (TranslationModule.PermissaoGrupo + MenuGroup.id | translate) : MenuGroup.title}} 
+        </ion-text>
+      </ion-label>
+    </ion-item> -->
+    <div class="gradient-background header flex flex-col gap-1 p-2 text-center items-center justify-center rounded-xl">
+      <ion-icon class="text-2xl" [name]="MenuGroup.icon"></ion-icon>
+      <ion-text class="text-dark">
+        {{useTranslation ? (TranslationModule.PermissaoGrupo + MenuGroup.id | translate) : MenuGroup.title}} 
+      </ion-text>
+    </div>
+  </div>
+  <div class="flex flex-col gap-2 w-full pt-2 mask-y overflow-y-auto">
+    @for (mGroup of MenuGroup.lstMenu; track $index) {
+      <!-- Menu -->
+      @if(mGroup.type == "Menu"){
+        <div (click)="HandleNav(mGroup, $event)" 
+          class="bg-inactive gradient-background menu"
+          [class.bg-active]="router.isActive('/' + mGroup.route, false)"
+        >
+          <div class="content">
+            <ion-icon class="shrink-0" [name]="mGroup.icon"></ion-icon>
+            <ion-label class="shrink">
+              {{useTranslation ? (TranslationModule.Permissao + mGroup.id | translate) : mGroup.title}}          
+            </ion-label>
+          </div>
+        </div>
+        <!-- <ion-item 
+          class="bg-inactive shrink-0" lines="none" 
+          (click)="HandleNav(mGroup)"
+          [ngClass]="{'colapsed': colapsed, 'bg-active' : router.isActive('/' + mGroup.route, false)}">
+          <ion-icon slot="start" [name]="mGroup.icon"></ion-icon>
+          <ion-label class="ion-text-nowrap">
+            {{useTranslation ? (TranslationModule.Permissao + mGroup.id | translate) : mGroup.title}}          
+          </ion-label>
+        </ion-item> -->
+      } 
+      @else if (mGroup.type == "MenuGroup") {
+        <!-- MenuGroup -->
+        <!-- <div class="w-full overflow-hidden shrink-0">
+          <ion-accordion-group class="ion-text-nowrap w-full">
+            <ion-accordion class="bg-transparent" [value]="mGroup">
+              <ion-item slot="header" color="light" class="ion-text-nowrap bg-inactive" style="--ion-color-base: var(--background) !important">
+                <ion-icon slot="start" [name]="mGroup.icon"></ion-icon>
+                <ion-label>
+                  {{useTranslation ? (TranslationModule.PermissaoGrupo + mGroup.id | translate) : mGroup.title}}
+                </ion-label>
+              </ion-item>
+              <div slot="content">
+                <div class="pl-8">
+                  <div class="w-full border-l-2 border-solid rounded-bl-2xl grid gap-2 pl-2 py-2" style="border-color: color-mix(in srgb, var(--ion-color-primary) 30%, transparent 70%)">
+                    @for (mMenu of mGroup.lstMenu; track $index) {
+                      @if (mMenu.type == "Menu") {
+                        <ion-item 
+                          class="bg-inactive" lines="none" 
+                          (click)="HandleNav(mMenu)"
+                          [ngClass]="{'colapsed': colapsed, 'bg-active' : router.isActive('/' + mMenu.route, false)}">
+                          <ion-icon slot="start" [name]="mMenu.icon"></ion-icon>
+                          <ion-label class="ion-text-nowrap">
+                            {{useTranslation ? (TranslationModule.Permissao + mMenu.id | translate) : mMenu.title}}
+                          </ion-label>
+                        </ion-item>
+                      }
+                    }
+                  </div>
+                </div>
+              </div>
+            </ion-accordion>
+          </ion-accordion-group>
+        </div> -->
+      }
+    }
+  </div>
+</div>

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

@@ -0,0 +1,49 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit, QueryList, ViewChildren } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonicModule, NavController } from '@ionic/angular';
+import { Menu } from '.././menu';
+import { Router, RouterLinkWithHref } from '@angular/router';
+import { GenericService } from '../../../services/generic.service';
+import { NgVarDirective } from '../../../directives/ng-var.directive';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  standalone: true,
+  imports: [CommonModule, IonicModule, RouterLinkWithHref, TranslateModule],
+  selector: 'drawer-group',
+  templateUrl: './drawer-group.component.html',
+  styleUrls: ['./drawer-group.component.scss'],
+})
+export class DrawerGroupComponent  implements OnInit {
+
+  TranslationModule: any = {
+    Permissao     : 'Entities.Permissao.',
+    PermissaoGrupo: 'Entities.PermissaoGrupo.'
+  };
+  @Input() MenuGroup: Menu;
+  @Input() colapsed: boolean;
+  @Input() useTranslation: boolean;
+
+  constructor(
+    public router: Router,
+    private navController: NavController,
+    private genericService: GenericService
+  ) { }
+
+  ngOnInit() {}
+
+  HandleNav(item: Menu | any, event: MouseEvent) {
+    if(event.ctrlKey || event.metaKey){
+      window.open(window.origin + '/' + item.route, '_blank');
+      event.preventDefault();
+      return;
+    }
+    this.SetTitle(item);
+    this.navController.navigateRoot('/' + item.route);
+  }
+  SetTitle(item: Menu){
+    this.genericService.SetTitle(item.title);
+  }
+
+  @ViewChildren(IonAccordionGroup) lstIonAcordionGroup: QueryList<IonAccordion>
+}

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

@@ -0,0 +1,120 @@
+<div class="absolute left-0 top-0 h-full bg-light size-full flex flex-col p-2 !pr-0 w-[19rem] overflow-hidden" (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()">
+  <!-- [ Header ] -->
+  <div class="shrink-0 w-full flex justify-between items-center">
+    <div #anchor
+      (click)="ToggleCollapsed()" 
+      class="toggle size-10 aspect-square shrink-0 rounded-xl bg-inactive gradient-background menu"
+    >
+      <ion-icon name="menu" slot="icon-only"></ion-icon>
+    </div>
+    <!-- <ion-button class="size-10 shrink-0 aspect-square" size="small" color="medium" (click)="ToggleCollapsed()">
+      <ion-icon name="menu" slot="icon-only"></ion-icon>
+    </ion-button> -->
+
+    <div class="size-full shrink flex pl-2 ">
+      <div class="size-full max-h-10 flex flex-wrap overflow-hidden">
+        @if (!ref.children.length) {
+          <ion-text class="size-full flex items-center justify-center default-transition z-0" [ngClass]="{'opacity-0 -translate-x-1/2 pointer-events-none': colapsed }"> 
+            {{title}}
+          </ion-text>
+        }
+        <div #ref class="size-full flex items-center justify-center shrink-0">
+          <ng-content select="[slot=logo]"></ng-content>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- [ Content ] -->
+  <div class="size-full shrink flex flex-col relative overflow-hidden">
+    <loading [type]="3" [loading]="loading" text=""></loading>
+    <div class="size-full shrink flex gap-2">
+      <div class="h-full w-12 pr-2 py-2 mask-y shrink-0 flex flex-col gap-2 overflow-y-auto overflow-x-hidden border-dashed border-r border-r-medium/30">
+        <div #searchAnchor (click)="modal.present()" class="search-button size-10 aspect-square shrink-0 rounded-xl bg-inactive gradient-background menu">
+          <ion-icon name="search" slot="icon-only"></ion-icon>
+        </div>
+
+        @for (item of lstMenu(); track $index) {
+          <div>
+            <div
+              [class.bg-active]="CurrentGroupActive == item"
+              #anchor (mouseenter)="popover.present($event)" 
+              (mouseleave)="popover.dismiss()" 
+              (click)="CurrentGroupActive = item" 
+              class="w-10 aspect-square shrink-0 rounded-xl bg-inactive gradient-background menu"
+            >
+              <ion-icon [name]="item.icon"></ion-icon>
+            </div>
+            <sion-popover #popover [anchor]="anchor" [flip]="false" placement="right" fill="solid">
+              <div class="p-1">
+                {{useTranslation ? (TranslationModule.PermissaoGrupo + item.id | translate) : item.title}}
+              </div>
+            </sion-popover>
+          </div>
+        }
+
+      </div>
+      <div class="size-full shrink relative">
+        @for (mGroup of lstMenu(); track $index) {
+          <div class="absolute top-0 left-0 size-full py-2 default-transition opacity-0 translate-x-full z-0 overflow-hidden" [ngClass]="{'opacity-100 !translate-x-0': CurrentGroupActive == mGroup}">
+            <drawer-group [MenuGroup]="mGroup" [useTranslation]="useTranslation" [colapsed]="colapsed"></drawer-group>
+          </div>
+        }
+      </div>
+    </div>
+  </div>
+
+  <!-- [ End ] -->
+  <div class="shrink-0 w-full">
+    <ng-content select="[slot=drawer]"></ng-content>
+  </div>
+</div>
+
+<ion-modal #modal [keepContentsMounted]="true" (onWillDismiss)="search.set('')">
+  <ng-template>
+    <ion-content>
+      <ion-card class="size-full m-0 overflow-hidden">
+        <ion-card-content class="size-full flex flex-col overflow-hidden p-0">
+          <div class="shrink-0 w-full flex items-center justify-center">
+            <ion-searchbar class="p-0 !pl-2 !py-2" [ngModel]="this.search()" (ngModelChange)="this.search.set($event)" [debounce]="200"></ion-searchbar>
+            <ion-button size="small" fill="clear" (click)="modal.dismiss()">
+              <ion-icon name="close"></ion-icon>
+            </ion-button>
+          </div>
+
+          <div class="size-full flex flex-col shrink gap-2 overflow-y-auto p-2 mask-y">
+            @for (vGroup of lstMenuFiltered(); track $index) {
+              <ion-card class="m-0 shrink-0">
+                <ion-card-content class="p-0 gradient-background bg-inactive flex flex-col">
+                  <div class="w-10 flex items-center !justify-start gap-2 text-dark shrink-0 p-2">
+                    <ion-icon [name]="vGroup.icon"></ion-icon>
+                    <ion-text>
+                      {{useTranslation ? (TranslationModule.PermissaoGrupo + vGroup.id | translate) : vGroup.title}} 
+                    </ion-text>
+                  </div>
+                  @for (vMenu of vGroup.lstMenu; track $index) {
+                    <div 
+                      (click)="HandleNav(vMenu, $event); modal.dismiss()"
+                      [class.bg-active]="router.isActive('/' + vMenu.route, false)"
+                      class="w-full flex items-center !justify-start gap-2 text-dark shrink-0 !pl-8 p-1.5 border-t border-t-medium/30 menu-search">
+                      <ion-icon [name]="vMenu.icon"></ion-icon>
+                      <ion-text>
+                        {{useTranslation ? (TranslationModule.Permissao + vMenu.id | translate) : vMenu.title}} 
+                      </ion-text>
+                    </div>
+                  }
+                </ion-card-content>
+              </ion-card>
+            }
+
+            @if (lstMenuFiltered().length == 0) {
+              <ion-text class="text-center text-medium">
+                {{useTranslation ? (TranslationModule.SemResultado | translate) : 'Sem resultados encontrados'}}
+              </ion-text>
+            }
+          </div>
+        </ion-card-content>
+      </ion-card>
+    </ion-content>
+  </ng-template>
+</ion-modal>