@sapphire-ion/framework 1.2.62 → 1.3.1

package/src/lib/components/default/default-view/default-view.component.ts

@@ -0,0 +1,56 @@
+import { FormBuilder } from '@angular/forms';
+import { Component, ElementRef, Input, OnInit } from '@angular/core';
+import { ActivatedRoute, UrlTree } from '@angular/router';
+import { NavController } from '@ionic/angular';
+
+
+import { HttpServiceAtivo } from '../../../services/web/http.ativo.service';
+import { HttpService      } from '../../../services/web/http.service';
+import { GenericService } from '../../../services/generic.service';
+import { View } from './view';
+import { InputType } from '../../inputs/input-type';
+
+/** Componente View Padão */
+@Component({
+  selector: 'default-view',
+  templateUrl: './default-view.component.html',
+  styleUrls: ['./default-view.component.scss'],
+})
+export class DefaultViewComponent<T extends HttpService | HttpServiceAtivo> extends View<T> implements OnInit {
+
+  /** Remove o botão de voltar */
+  @Input() noBack: boolean = false;
+  /** Remove o botão NOVO da listagem */
+  @Input() noNew : boolean = false;
+  /** Remove os breadcrumbs da listagem */
+  @Input() noBreadcrumbs: boolean = false;
+  /** Habilita/Desabilita o focus no primeiro campo da view
+   * 1 - para ativar no novo e no editar
+   * 2 - para ativar apenas no novo
+   * 3 - para desativar para os dois casos
+   *     [Padrão 2]
+   */
+  @Input() focusInFirstField: number = 2;
+
+  InputType = InputType;
+
+
+  
+  /**  
+   * Rota para voltar, caso não seja definida, o componente irá tentar usar rota do ionic
+  */
+  @Input() backRouterLink: string | any[] | UrlTree | undefined = undefined;
+
+  constructor(
+    public override fb: FormBuilder,
+    public override elementRef: ElementRef,
+    public override activatedRoute: ActivatedRoute,
+    public override genericService: GenericService,
+    public override navController: NavController,
+  ) { super(); }
+
+  override async ngOnInit() {
+    this.startInFirstField = this.focusInFirstField;
+    await super.ngOnInit()
+  }
+}

package/src/lib/components/default/default-view/header-view/header-view.component.html

@@ -0,0 +1,64 @@
+<div class="w-full h-7 flex">
+  <div class="w-1/2 flex items-center justify-start gap-3">
+    @if(!noBack){
+      @if(useDefaultRouting || backRouterLink){
+        <ion-button class="m-0" fill="clear" size="small" [routerLink]="backRouterLink ? backRouterLink : DefaultBackRoute">
+          <ion-icon class="text-[1.7rem]" name="chevron-back" slot="icon-only"></ion-icon>
+          <ion-text class="text-base">Voltar</ion-text>
+        </ion-button>
+      }
+      @else{
+        <ion-back-button style="--min-height: 100%;" [disabled]="loading" text="Voltar" [defaultHref]="DefaultBackRoute"></ion-back-button>
+      }
+
+      <!-- <ion-card button [disabled]="loading" class="h-full w-12 m-0 default-transition" style="border-color: var(--ion-color-primary)">
+        <ion-card-content class="p-0 bg-transparent">
+          @if(!useDefaultRouting){
+            <ion-back-button class="scale-75 size-full" style="--min-height: 100%;" text=""  [defaultHref]="BackRoute" >
+            </ion-back-button>
+          }@else {
+            <ion-button class="size-full" size="small" fill="clear" [routerLink]="BackRoute">
+              <ion-icon name="chevron-back" slot="icon-only"></ion-icon>
+            </ion-button>
+          }
+        </ion-card-content>
+      </ion-card> -->
+    }
+    @if(!noBack){
+      <div class="h-full border-r-2 border-r-primary border-solid mask-y/50"></div>
+    }
+
+    <div class="relative">
+      <ion-button class="-mx-2" [disabled]="loading" fill="clear" size="small" (click)="Save()">
+        <ion-icon class="text-base" slot="start" name="save"></ion-icon>
+        <ion-text class="text-base">
+          Salvar
+        </ion-text>
+      </ion-button>
+
+      <div class="absolute w-[125%] h-[125%] -top-[12.5%] -left-[12.5%] flex flex-col items-center justify-center default-transition backdrop-blur-sm" [ngClass]="{'opacity-0 -translate-y-8': !loading}">
+        <ion-text color="success" class="text-sm mt-1"><b>
+          @if(progress){
+            {{(progress * 100) | number: '1.1-1'}}%
+          }@else {
+            {{0 | number: '1.1-1'}}%
+          }
+        </b></ion-text>
+        <ion-progress-bar [value]="progress" color="success" class="w-full default-transition"></ion-progress-bar>
+      </div>
+    </div>
+    <ng-content select="[slot=start]"></ng-content>
+  </div>
+  <div class="w-1/2 flex justify-end items-center gap-2">
+    <ng-content select="[slot=end]"></ng-content>
+
+    @if(!(noNew || novo)){
+      <ion-button #new [routerLink]="['../']" class="m-0" fill="clear" size="small">
+        <ion-icon class="text-base" name="add" slot="start"></ion-icon> 
+        <ion-text class="text-base">
+          Novo
+        </ion-text>
+      </ion-button>
+    }
+  </div>
+</div>

package/src/lib/components/default/default-view/header-view/header-view.component.ts

@@ -0,0 +1,62 @@
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { IonBackButton, NavController } from '@ionic/angular';
+import { ActivatedRoute, UrlTree } from '@angular/router';
+import { NavigationContextService } from '../../../../services/navigation-context.service';
+
+@Component({
+  selector: 'header-view',
+  templateUrl: './header-view.component.html',
+  styleUrls: ['./header-view.component.scss'],
+})
+export class HeaderViewComponent implements OnInit {
+
+  @Input() novo: boolean = false;
+  @Input() loading: boolean;
+  @Input() progress: number | null = null;
+  
+  @Output('save') saveEmitter: EventEmitter<void> = new EventEmitter<void>();  
+
+  /** Habilita/Desabilita o focus no primeiro campo da view */
+  @Input() focusInFirstField: boolean = false;
+  /** Remove o botão de volta */
+  @Input() noBack: boolean = false;
+  /** Remove o botão de Novo */
+  @Input() noNew : boolean = false;
+  /** Parâmetro usado em telas dentro de telas, para que o retorno sempre seja a tela anterior */
+  @Input() useDefaultRouting: boolean = false;
+  /**  
+   * Rota para voltar, caso não seja definida, o componente irá tentar usar rota do ionic
+  */
+  @Input() backRouterLink: string | any[] | UrlTree | undefined = undefined;
+
+  constructor(
+    private navController: NavController,
+    private activatedRoute: ActivatedRoute,
+    private navContext : NavigationContextService
+  ) { }
+
+  ngOnInit() {}
+
+  protected get DefaultBackRoute(): string {
+    return this.navContext.getBackRoute() ?? '/';
+  }
+
+  @ViewChild(IonBackButton) IonBackButtonElement: IonBackButton; 
+  public Back($event = null){
+    this.IonBackButtonElement.onClick($event)
+  }
+  @ViewChild('new') NewIonButtonElement: ElementRef; 
+  public New(){
+    if(!this.novo){
+      this.navController.navigateForward(['../'], { 
+        relativeTo: this.activatedRoute,
+        replaceUrl: true 
+      });
+    }
+  }
+
+  Save(): void{
+    this.saveEmitter.emit();
+  }
+
+}

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

@@ -0,0 +1,195 @@
+import { Component, ElementRef, EventEmitter, HostListener, inject, Input, OnInit, Output, QueryList, ViewChild, viewChild, ViewChildren } from "@angular/core";
+import { FormBuilder, FormGroup } from "@angular/forms";
+import { ActivatedRoute } from "@angular/router";
+
+import { HttpService      } from "../../../services/web/http.service";
+import { HttpServiceAtivo } from "../../../services/web/http.ativo.service";
+import { GenericService   } from "../../../services/generic.service";
+import { TableFieldFormBuilder } from "../../../classes/inputs/table-field-form-builder";
+import { NavController } from "@ionic/angular";
+import { firstValueFrom, lastValueFrom } from "rxjs";
+import { HeaderViewComponent } from "./header-view/header-view.component";
+import { TableField } from "../../../classes/inputs/table-field";
+import { RouteData } from "../../../classes/routes/route-data";
+import { CustomInput } from "../../inputs/custom-input";
+import { Timeout } from "../../../services/utils.service";
+import { NavigationContextService } from '../../../services/navigation-context.service';
+
+@Component({ template: '', styles: '' })
+export abstract class View<T extends HttpService | HttpServiceAtivo> implements OnInit {
+  /** Id do dado a ser carregado */
+  @Input() id       : number | null = null;
+  @Input() loading  : boolean = false;
+  @Input() submitted: boolean = false;
+  /** Progresso de salvamento */
+  @Input() progress : number;
+  /** Service a ser utlizado na view */
+  @Input() service  : T;
+  /** Habilita/Desabilita o focus no primeiro campo da view
+   * 1 - para ativar no novo e no editar
+   * 2 - para ativar apenas no novo
+   * 3 - para desativar para os dois casos
+   */
+  @Input() startInFirstField : number = 2;
+
+  protected genericService: GenericService;
+  protected activatedRoute: ActivatedRoute;
+  protected elementRef: ElementRef;
+  protected fb: FormBuilder;
+  protected navContext : NavigationContextService
+  protected nested: boolean = false;
+
+  constructor(){
+    this.genericService = inject(GenericService)
+    this.activatedRoute = inject(ActivatedRoute)
+    this.elementRef     = inject(ElementRef)
+    this.fb             = inject(FormBuilder)
+    this.navContext     = inject(NavigationContextService)
+  }
+
+  /** Lista de TableFields a serem invocados de acordo com sua configuração.
+   * Automaticamente preenchido com service.lstTableFieldsView ou service.lstTableFields quando não informado
+    */
+  @Input() lstTableFields: TableField[] = [];
+  @Input() public redirectPath: string | null = "/view/:id"
+  
+  
+  @ViewChild('.wrapper') Wrapper: HTMLElement;
+  async ngOnInit() {
+    if(this.lstTableFields.length == 0){
+      if(this.service.lstTableFieldsView.length != 0){
+        this.lstTableFields = this.service.lstTableFieldsView;
+      }else{
+        this.lstTableFields = this.service.lstTableFields;
+      }
+    }
+
+    if(this.id == null){
+      this.id = this.genericService.GetId(this.activatedRoute, 0);
+    }
+    
+    if(!this.service){ console.warn("[ View service is not valid! ]"); }
+    if (instanceOfViewWillCreateForm(this)) { this.OnViewWillCreateForm() }
+    await this.CreateForm();
+    if (instanceOfViewDidCreateForm(this)) { this.OnViewDidCreateForm() }
+  
+    if(this.elementRef && this.elementRef.nativeElement && this.elementRef.nativeElement.parentElement){
+      this.nested = (this.elementRef.nativeElement.parentElement.tagName as string).toUpperCase() != "ION-CONTENT";
+    }else{
+      this.nested = true;
+    }
+
+    await this.Refresh();
+
+    if(this.startInFirstField == 1){
+      await this.FocusOnFirstField();
+    }else if (this.startInFirstField == 2){
+      if(!this.id){
+        await this.FocusOnFirstField();
+      }
+    }
+
+  }
+
+  @ViewChildren(CustomInput) lstCustomInputs: QueryList<CustomInput<any>>;
+  async FocusOnFirstField(): Promise<void> {
+    try{
+      await Timeout(100);
+      this.lstCustomInputs.first.setFocus(null);
+    }catch{}
+  }
+
+  @Output('ViewDidRefresh') ViewDidRefreshEmitter: EventEmitter<void> = new EventEmitter<void>();
+  async Refresh() {
+    this.loading = true;
+    try{
+      await this.Load();
+    }finally{ }
+    this.loading = false;
+    this.ViewDidRefreshEmitter.emit();
+  }
+
+  async Load(): Promise<void>{
+    if(!this.id){ return; }
+    const res = await firstValueFrom(this.service.Get(this.id));
+    this.frm.patchValue(res);
+  }
+
+  frm: FormGroup;
+  async CreateForm() {
+    this.frm = TableFieldFormBuilder.create(this.lstTableFields, this.fb);
+    await this.LoadIdComparison();
+  }
+
+  async LoadIdComparison(): Promise<void> {
+    try{
+      const data: RouteData = await firstValueFrom(this.activatedRoute.data) as RouteData;
+      if(!data){ return; }
+      const id   = this.genericService.GetId(this.activatedRoute, data.idPreloaderConfiguration.routeDepth);
+      
+      if(!id){ return; }
+
+      this.frm.controls[data.idPreloaderConfiguration.propertyName].setValue(id);
+      this.lstTableFields.find(p => p.index == data.idPreloaderConfiguration.propertyName).disabled = true;
+    }catch{ }
+  }
+
+  /** Emite o id da entidade salva apos o salvamento */
+  @Output('Save') SaveEmitter: EventEmitter<number> = new EventEmitter<number>();
+  async Save() {
+    await lastValueFrom(this.service.Save(this.frm, this));
+    this.SaveEmitter.emit(this.id);
+  }
+
+  public get BackRoute(){
+    return this.navContext.getBackRoute() ?? '/';
+  }
+
+  public GetCurrentRouting(): ActivatedRoute { return this.activatedRoute; }
+
+  protected navController: NavController;
+
+  protected NavigateToList(): void {
+  const back = this.navContext.getBackRoute() ?? '/';
+  this.navController.navigateBack(back);
+}
+
+
+  @ViewChild(HeaderViewComponent) HeaderViewComponentElement: HeaderViewComponent;
+
+  @HostListener('window:keydown',['$event'])
+  onKeyPress($event: KeyboardEvent) {
+    if(!(this.elementRef.nativeElement.contains(document.activeElement) || document.activeElement == this.elementRef.nativeElement)){
+      return;
+    }
+    if($event.key == 'Escape'){
+      this.HeaderViewComponentElement.Back($event);
+      $event.preventDefault();
+      return;
+    }
+    if(($event.ctrlKey || $event.metaKey) && ($event.key == 'Enter')){
+      this.Save();
+      $event.preventDefault();
+      return;
+    }
+    if($event.altKey && $event.key == 'Insert'){
+      this.HeaderViewComponentElement.New();
+      $event.preventDefault();
+      return;
+    }
+  }
+}
+
+export interface ViewWillCreateForm{
+  OnViewWillCreateForm(): void | any;
+} 
+function instanceOfViewWillCreateForm(object: any): object is ViewWillCreateForm {
+  return 'OnViewWillCreateForm' in object;
+}
+export interface ViewDidCreateForm {
+  OnViewDidCreateForm(): void | any;
+} 
+function instanceOfViewDidCreateForm(object: any): object is ViewDidCreateForm {
+  return 'OnViewDidCreateForm' in object;
+}
+

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