@sapphire-ion/framework 1.2.63 → 1.3.2

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>

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");
+  }
+}