@sapphire-ion/framework 0.30.27 → 0.30.28

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

@@ -0,0 +1,53 @@
+<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-8">
+        <div class="w-full shrink-0 text-center">
+          @if(configuration?.image){
+            <ion-img [class]="configuration.image.classes" [src]="configuration.image.src" (ion-error)="configuration.image = null"></ion-img>
+          }
+          @else {
+            <ion-text class="text-8xl font-poppins w-full"> {{title}} </ion-text>
+          }
+        </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"> 
+            @for (item of lstMenu; track item; let i = $index) {
+              @if(item.type == "Menu"){
+                <ion-button fill="outline" class="mx-1 mt-2 flex-grow shrink-0" [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="mx-1 mt-2 flex-grow shrink-0" (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>
+      </ion-card-content>
+    </ion-card>
+  </div>
+</ion-content>

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

@@ -0,0 +1,77 @@
+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/generics.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[] = [] 
+  configuration: DefaultPageConfiguration | null = null;
+  async ngOnInit(): Promise<void> {
+    this.loading = true;
+    this.configuration = await firstValueFrom(this.route.data) as DefaultPageConfiguration;
+    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 | 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="mt-1 w-full default-transition flex p-3" [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,61 @@
+<div class="w-full text-center mb-2">
+  <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>
+
+<div class="grid gap-2 w-full overflow-hidden">
+  @for (mGroup of MenuGroup.lstMenu; track $index) {
+    <!-- Menu -->
+    @if(mGroup.type == "Menu"){
+      <ion-item 
+        class="bg-inactive" 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">
+        <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>

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

@@ -0,0 +1,44 @@
+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 } from '@angular/router';
+import { GenericService } from '../../../services/generics.service';
+import { NgVarDirective } from '../../../directives/ng-var.directive';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  standalone: true,
+  imports: [CommonModule, IonicModule, NgVarDirective, 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){
+    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,56 @@
+<div class="absolute left-0 top-0 h-full w-[19rem] flex flex-col bg-light" (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()">
+  <div class="w-full px-2 h-14 pt-2 flex justify-between items-center text-3xl text-center">
+    <ion-button id="drawer-button" class="shrink-0 portrait:hidden aspect-square h-12 z-10 default-transition m-0" size="small" fill="outline" color="dark" style="--border-radius: 999rem; --border-width: 0;" (click)="ToggleCollapsed()"> 
+      <ion-icon name="menu" slot="icon-only"></ion-icon>
+    </ion-button>
+    <div class="size-full">
+      @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': colapsed }"> 
+          {{title}}
+        </ion-text>
+      }
+      <div #ref class="size-full flex items-center justify-center">
+        <ng-content select="[slot=logo]"></ng-content>
+      </div>
+    </div>
+  </div>
+
+  <div id="menu-conteiner" class="mask-y flex flex-col relative">
+    <loading [type]="3" [loading]="loading" text=""></loading>
+    <div class="size-full shrink flex">
+      <div class="h-full w-16 p-2 shrink-0">
+        <div class="grid gap-2">
+          @for (item of lstMenu(); track $index) {
+            <ion-item 
+              id="group-menu" [title]="item.title" class="bg-inactive relative overflow-visible" lines="none" style="--padding-start: 0;"
+              (click)="CurrentGroupActive = item" 
+              [ngClass]="{'bg-active': CurrentGroupActive == item}"
+            >
+              <div id="tooltip" class="opacity-0 !pointer-events-none -translate-x-4 absolute top-0 bottom-0 default-transition left-14 px-2 my-auto text-nowrap h-8 bg-[var(--ion-color-secondary)] -z-30 rounded-xl flex items-center justify-center">
+                <div class="absolute -left-1 top-0 rounded bottom-0 my-auto rotate-45 h-4 aspect-square bg-[var(--ion-color-secondary)]"></div>
+                <ion-icon class="z-50 mr-2" [name]="item.icon"></ion-icon>
+                <ion-text class="z-50"> 
+                  {{useTranslation ? (TranslationModule.PermissaoGrupo + item.id | translate) : item.title}}
+                </ion-text>
+              </div>
+              <div class="absolute top-0 size-full flex items-center justify-center overflow-visible">
+                <ion-icon class="text-2xl" [name]="item.icon"></ion-icon>
+              </div>
+            </ion-item>
+          }
+        </div>
+      </div>
+      <div class="h-full w-full border-dashed border-l relative" style="border-color: color-mix(in srgb, var(--ion-color-dark) 20%, transparent 80%);">
+        @for (mGroup of lstMenu(); track $index) {
+          <div class="absolute top-0 left-0 px-2 py-2 size-full default-transition opacity-0 translate-x-full z-0 mask-y overflow-y-auto" [ngClass]="{'opacity-100 !translate-x-0': CurrentGroupActive == mGroup}">
+            <drawer-group [MenuGroup]="mGroup" [useTranslation]="useTranslation" [colapsed]="colapsed"></drawer-group>
+          </div>
+        }
+      </div>
+    </div> 
+
+    <div class="shrink-0 w-full">
+      <ng-content select="[slot=drawer]"></ng-content>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,119 @@
+import { Component, computed, effect, EventEmitter, input, Input, InputSignal, Output, Signal } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { Menu } from './menu';
+
+import { DrawerGroupComponent } from './drawer-group/drawer-group.component';
+import { LoadingComponent } from '../../components/loading/loading.component';
+import { GenericService } from '../../services/generics.service';
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    IonicModule,
+    LoadingComponent,
+    DrawerGroupComponent,
+    TranslateModule
+  ],
+  selector: 'drawer',
+  templateUrl: './drawer.component.html',
+  styleUrls: ['./drawer.component.scss'],
+})
+export class DrawerComponent {
+
+  TranslationModule: any = {
+    Permissao     : 'Entities.Permissao.',
+    PermissaoGrupo: 'Entities.PermissaoGrupo.'
+  };
+
+  @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(
+    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);
+    }
+  }
+}
+
+/**
+ * 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,31 @@
+@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>
+    }
+  }
+}