@dropi/ui-components 1.0.12 → 1.0.13

package/src/components-source/dropi-modal/dropi-modal.component.ts

@@ -1,392 +1,76 @@
 import {
-  AfterContentInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
-  ContentChildren,
-  EventEmitter,
-  HostListener,
   Input,
-  OnChanges,
-  OnDestroy,
   Output,
-  QueryList,
-  SimpleChanges,
-  TemplateRef,
-  ViewChild,
-  ViewContainerRef,
-  ViewEncapsulation,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { Subscription } from 'rxjs';
-import { Overlay, OverlayModule, OverlayRef } from '@angular/cdk/overlay';
-import { PortalModule, TemplatePortal } from '@angular/cdk/portal';
-
-import { PTemplateDirective } from './p-template.directive';
-import { DropiModalStackService } from './dropi-modal-stack.service';
-
-type DropiTemplateType = 'header' | 'content' | 'footer';
+  EventEmitter,
+  OnInit,
+  CUSTOM_ELEMENTS_SCHEMA,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
 
 @Component({
-  selector: 'dropi-modal',
+  selector: "dropi-modal",
   standalone: true,
-  imports: [CommonModule, OverlayModule, PortalModule],
-  templateUrl: './dropi-modal.component.html',
-  styleUrls: ['./dropi-modal.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: "./dropi-modal.component.html",
+  styleUrls: ["./dropi-modal.component.scss"],
 })
-export class DropiModalComponent implements OnChanges, AfterContentInit, OnDestroy {
-  @Input() visible = false;
-  @Output() visibleChange = new EventEmitter<boolean>();
-
-  /** Similar a PrimeNG */
-  @Input() modal = true;
-  @Input() dismissableMask = true;
-  @Input() dismissible = true;
-  @Input() closeOnEscape = true;
-  @Input() showCloseIcon = true;
-  /** Compat PrimeNG: `closable` controla el icono de cierre */
-  @Input() closable = true;
-  /** Compat PrimeNG (no-op) */
-  @Input() draggable = false;
-  /** Compat PrimeNG (no-op) */
-  @Input() resizable = false;
-  @Input() blockScroll = true;
-
-  /** Se mantiene por compatibilidad con usos actuales */
-  @Input() autoZIndex = true;
-  @Input() baseZIndex = 1100;
-  @Input() transitionOptions = '0.15s';
-
-  /** Posicionamiento del panel (para reemplazar sidebars) */
-  @Input() position: 'center' | 'right' | 'left' | 'top' | 'bottom' = 'center';
-
-  /** Header */
-  @Input() showHeader = true;
-  @Input() header: string | null = null;
-
-  /** Clases adicionales (ej: 'dropi-dialog size-m') */
-  @Input() styleClass: string | null = null;
-
-  /** Ancho máximo del panel (solo aplica cuando position es 'left' o 'right') */
-  @Input() maxWidth: string | null = null;
-
-  @Output() onHide = new EventEmitter<void>();
-  @Output() onShow = new EventEmitter<void>();
-
-  @ContentChildren(PTemplateDirective) private readonly templates!: QueryList<PTemplateDirective>;
-
-  @ViewChild('overlayTpl', { read: TemplateRef })
-  private readonly overlayTpl!: TemplateRef<unknown>;
-
-  headerTemplate: TemplateRef<unknown> | null = null;
-  contentTemplate: TemplateRef<unknown> | null = null;
-  footerTemplate: TemplateRef<unknown> | null = null;
-
-  maskZIndex = 1100;
-  panelZIndex = 1101;
-
-  isOpen = false;
-  isClosing = false;
-
-  private readonly id = `dropi-modal-${Math.random().toString(36).slice(2)}`;
-  private isRegistered = false;
-  private overlayRef: OverlayRef | null = null;
-  private portal: TemplatePortal | null = null;
-  private closeTimeoutId: number | null = null;
-  private pendingOnHideEmit = false;
-
-  private readonly subscriptions = new Subscription();
-
-  constructor(
-    private readonly stack: DropiModalStackService,
-    private readonly cdr: ChangeDetectorRef,
-    private readonly overlay: Overlay,
-    private readonly viewContainerRef: ViewContainerRef,
-  ) {}
-
-  get panelClass(): string {
-    const base = 'dropi-modal__panel';
-    const extra = (this.styleClass ?? '').trim();
-    return extra ? `${base} ${extra}` : base;
-  }
-
-  get rootPositionClass(): string {
-    return `dropi-modal-root--${this.position}`;
-  }
-
-  get rootClasses(): string[] {
-    const classes = ['dropi-modal-root', this.rootPositionClass];
-
-    if (this.isOpen) {
-      classes.push('dropi-modal-root--open');
-    }
-
-    if (this.isClosing) {
-      classes.push('dropi-modal-root--closing');
-    }
-
-    return classes;
-  }
-
-  ngAfterContentInit(): void {
-    this.resolveTemplates();
-
-    this.subscriptions.add(
-      this.templates.changes.subscribe(() => {
-        this.resolveTemplates();
-        this.cdr.markForCheck();
-      }),
-    );
-
-    this.cdr.markForCheck();
-
-    if (this.visible) {
-      this.show();
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['closable']) {
-      this.showCloseIcon = this.closable;
-    }
-
-    if (changes['visible']) {
-      if (this.visible) {
-        this.show();
-        queueMicrotask(() => this.onShow.emit());
-      } else {
-        // Cierre con animación: esperar a terminar antes de detach/unregister.
-        this.pendingOnHideEmit = true;
-        this.startClose();
-      }
-    }
-
-    if (changes['baseZIndex'] && this.visible) {
-      this.syncZIndex();
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.subscriptions.unsubscribe();
-    this.clearCloseTimer();
-    this.detachFromBody(true);
-    this.unregister();
-  }
-
-  hide(): void {
+export class DropiModalComponent implements OnInit {
+  @Input() public visible: boolean = false;
+  @Input() public modal: boolean = true;
+  @Input() public dismissableMask: boolean = true;
+  @Input() public closeOnEscape: boolean = true;
+  @Input() public showCloseIcon: boolean = true;
+  @Input() public showHeader: boolean = true;
+  @Input() public header: string | null = null;
+  @Input() public styleClass: string | null = null;
+  @Input() public maxWidth: string | null = null;
+  @Input() public position: string = "center";
+  @Input() public transitionOptions: string = "0.15s";
+
+  @Output() public visibleChange = new EventEmitter<boolean>();
+  @Output() public onHide = new EventEmitter<void>();
+  @Output() public onShow = new EventEmitter<void>();
+  @Output() public onClose = new EventEmitter<void>();
+
+  // Propiedades requeridas por el template
+  public rootClasses: string[] = [];
+  public maskZIndex: number = 1100;
+  public panelZIndex: number = 1101;
+  public panelClass: string = "dropi-modal__panel";
+  public headerTemplate: any = null;
+  public contentTemplate: any = null;
+  public footerTemplate: any = null;
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.updateClasses();
+  }
+
+  public hide(): void {
     this.visible = false;
     this.visibleChange.emit(false);
-    this.pendingOnHideEmit = true;
-    this.startClose();
-  }
-
-  private show(): void {
-    this.attachToBody();
-    this.registerAndSyncZIndex();
-
-    // Si attachToBody se difirió (overlayTpl no listo), no continuar aún.
-    // La microtarea agendada en attachToBody volverá a llamar a show.
-    if (!this.overlayRef?.hasAttached()) {
-      return;
-    }
-
-    this.isClosing = false;
-    this.isOpen = false;
-    this.clearCloseTimer();
-    this.cdr.markForCheck();
-
-    // Usar doble rAF para garantizar que el DOM se haya pintado con el estado inicial
-    // antes de activar la clase "open" y disparar la animación.
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        this.isOpen = true;
-        this.cdr.markForCheck();
-      });
-    });
-  }
-
-  onMaskClick(event: MouseEvent): void {
-    event.stopPropagation();
-
-    if (!this.modal) {
-      return;
-    }
-
-    if (!this.dismissible || !this.dismissableMask) {
-      return;
-    }
-
-    this.hide();
+    this.onHide.emit();
+    this.onClose.emit();
   }
 
-  @HostListener('document:keydown.escape', ['$event'])
-  onEscape(event: KeyboardEvent): void {
-    if (!this.visible) {
-      return;
-    }
-
-    if (!this.closeOnEscape || !this.dismissible) {
-      return;
-    }
-
-    event.preventDefault();
+  public close(): void {
     this.hide();
   }
 
-  private resolveTemplates(): void {
-    if (!this.templates) {
-      return;
-    }
-
-    const templateByType = new Map<DropiTemplateType, TemplateRef<unknown>>();
-
-    for (const entry of this.templates.toArray()) {
-      const type = (entry.type ?? '') as DropiTemplateType;
-      if (type === 'header' || type === 'content' || type === 'footer') {
-        templateByType.set(type, entry.template);
-      }
-    }
-
-    this.headerTemplate = templateByType.get('header') ?? null;
-    this.contentTemplate = templateByType.get('content') ?? null;
-    this.footerTemplate = templateByType.get('footer') ?? null;
-  }
-
-  private registerAndSyncZIndex(): void {
-    if (!this.autoZIndex) {
-      this.maskZIndex = this.baseZIndex;
-      this.panelZIndex = this.baseZIndex + 1;
-      return;
-    }
-
-    if (!this.isRegistered) {
-      this.stack.register({
-        id: this.id,
-        baseZIndex: this.baseZIndex,
-        blockScroll: this.blockScroll,
-      });
-      this.isRegistered = true;
-    }
-
-    this.syncZIndex();
-  }
-
-  private startClose(): void {
-    if (!this.overlayRef?.hasAttached()) {
-      // Nada montado; asegurar cleanup.
-      this.unregister();
-      if (this.pendingOnHideEmit) {
-        this.pendingOnHideEmit = false;
-        this.onHide.emit();
-      }
-      return;
-    }
-
-    if (this.isClosing) {
-      return;
-    }
-
-    this.isClosing = true;
-    // Mantener "open" para que la animación de salida parta desde visible.
-    this.isOpen = true;
-    this.cdr.markForCheck();
-
-    const durationMs = this.parseTransitionToMs(this.transitionOptions);
-
-    this.clearCloseTimer();
-    this.closeTimeoutId = window.setTimeout(() => {
-      this.detachFromBody();
-      this.unregister();
-      this.isClosing = false;
-      this.isOpen = false;
-      this.cdr.markForCheck();
-
-      if (this.pendingOnHideEmit) {
-        this.pendingOnHideEmit = false;
-        this.onHide.emit();
-      }
-    }, durationMs);
-  }
-
-  private attachToBody(): void {
-    if (!this.overlayTpl) {
-      // Por si el ciclo de vida aún no creó el TemplateRef.
-      queueMicrotask(() => this.show());
-      return;
-    }
-
-    if (!this.overlayRef) {
-      const positionStrategy = this.overlay.position().global().top('0').left('0');
-
-      this.overlayRef = this.overlay.create({
-        positionStrategy,
-        hasBackdrop: false,
-        scrollStrategy: this.overlay.scrollStrategies.noop(),
-        disposeOnNavigation: true,
-      });
-    }
-
-    if (!this.portal) {
-      this.portal = new TemplatePortal(this.overlayTpl, this.viewContainerRef);
-    }
-
-    if (!this.overlayRef.hasAttached()) {
-      this.overlayRef.attach(this.portal);
-    }
-  }
-
-  private detachFromBody(dispose = false): void {
-    if (this.overlayRef?.hasAttached()) {
-      this.overlayRef.detach();
-    }
-
-    if (dispose) {
-      this.overlayRef?.dispose();
-      this.overlayRef = null;
-      this.portal = null;
-    }
-  }
-
-  private clearCloseTimer(): void {
-    if (this.closeTimeoutId === null) {
-      return;
-    }
-
-    window.clearTimeout(this.closeTimeoutId);
-    this.closeTimeoutId = null;
-  }
-
-  private parseTransitionToMs(value: string | null | undefined): number {
-    const raw = (value ?? '').trim();
-    // Acepta '150ms', '0.2s' o strings que contengan tiempos (ej: '0.2s ease').
-    const match = raw.match(/(\d*\.?\d+)\s*(ms|s)\b/i);
-    if (!match) {
-      return 150;
+  public onMaskClick(event: any): void {
+    if (this.dismissableMask) {
+      this.hide();
     }
-
-    const amount = Number(match[1]);
-    if (!Number.isFinite(amount)) {
-      return 150;
-    }
-
-    const unit = match[2].toLowerCase();
-    return unit === 's' ? Math.round(amount * 1000) : Math.round(amount);
   }
 
-  private syncZIndex(): void {
-    const { maskZIndex, panelZIndex } = this.stack.getZIndexes(this.id);
-    this.maskZIndex = maskZIndex;
-    this.panelZIndex = panelZIndex;
-  }
-
-  private unregister(): void {
-    if (!this.isRegistered) {
-      return;
-    }
-
-    this.stack.unregister(this.id);
-    this.isRegistered = false;
+  private updateClasses(): void {
+    this.rootClasses = [
+      "dropi-modal-root",
+      `dropi-modal-root--${this.position}`,
+    ];
+    if (this.visible) this.rootClasses.push("dropi-modal-root--open");
   }
 }

package/src/components-source/dropi-navbar/dropi-navbar.component.ts

@@ -1,20 +1,21 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
-import {
-  DropiTableRow,
-} from '@app/utilities/interfaces/ui/dropi-table.interface';
+import { CommonModule } from "@angular/common";
+import { Component, Input, OnInit, Output, EventEmitter } from "@angular/core";
+// import {
+//   DropiTableRow,
+// } from '@app/utilities/interfaces/ui/dropi-table.interface';
+type DropiTableRow = any;
 
 @Component({
-  selector: 'app-dropi-navbar',
-  templateUrl: './dropi-navbar.component.html',
-  styleUrls: ['./dropi-navbar.component.scss'],
-  imports: [ CommonModule ],
-  standalone: true
+  selector: "app-dropi-navbar",
+  templateUrl: "./dropi-navbar.component.html",
+  styleUrls: ["./dropi-navbar.component.scss"],
+  imports: [CommonModule],
+  standalone: true,
 })
 export class DropiNavBarComponent implements OnInit {
-  @Input() public data: DropiTableRow[] = [];  
+  @Input() public data: DropiTableRow[] = [];
   @Input() public title: string = "";
-  @Output() clickLoadItem = new EventEmitter<{ item: any; }>();
+  @Output() clickLoadItem = new EventEmitter<{ item: any }>();
   sidebarItems: any[] = [];
   activeItem: any;
   isLoading: boolean = true;
@@ -29,9 +30,9 @@ export class DropiNavBarComponent implements OnInit {
 
   private updateSidebarItems(): void {
     if (this.data && this.data.length > 0) {
-      this.sidebarItems = this.data.map(item => ({
+      this.sidebarItems = this.data.map((item) => ({
         ...item,
-        expanded: false
+        expanded: false,
       }));
     } else {
     }
@@ -39,14 +40,13 @@ export class DropiNavBarComponent implements OnInit {
   }
 
   handleItemClick(item: any): void {
-    
     if (item.children && item.children.length > 0) {
       item.expanded = !item.expanded;
     }
-    
+
     this.activeItem = item;
     if (!item.children) {
       this.clickLoadItem.emit(item);
     }
   }
-}
+}

package/src/components-source/dropi-paginator/dropi-paginator.component.html

@@ -8,7 +8,11 @@
     (click)="goToFirstPage()"
     aria-label="Anterior"
   >
-    <app-icon [name]="'Arrow-double-small-left'" [width]="16" [height]="16" />
+    <app-icon
+      [name]="'Arrow-double-small-left'"
+      [width]="'16'"
+      [height]="'16'"
+    />
   </button>
   <button
     *ngIf="currentPage !== 1"
@@ -18,8 +22,8 @@
     (click)="prevPage()"
     aria-label="Anterior"
   >
-    <app-icon [name]="'Dropdown-left'" [width]="16" [height]="16" />
-    {{ 'Previous' | translate }}
+    <app-icon [name]="'Dropdown-left'" [width]="'16'" [height]="'16'" />
+    {{ "Previous" | translate }}
   </button>
 
   <ng-container *ngIf="!isNotTotalPages">
@@ -41,15 +45,18 @@
   </ng-container>
 
   <button
-    *ngIf="currentPage !== totalPages || (isNotTotalPages && currentPage < totalPages)"
+    *ngIf="
+      currentPage !== totalPages ||
+      (isNotTotalPages && currentPage < totalPages)
+    "
     class="page-item next"
     [ngClass]="{ nextCursor: isNotTotalPages }"
     [disabled]="disabled || currentPage === totalPages"
     (click)="nextPage()"
     aria-label="Siguiente"
   >
-    {{ 'Next' | translate }}
-    <app-icon [name]="'Dropdown-Right'" [width]="16" [height]="16" />
+    {{ "Next" | translate }}
+    <app-icon [name]="'Dropdown-Right'" [width]="'16'" [height]="'16'" />
   </button>
 
   <button
@@ -59,6 +66,10 @@
     (click)="goToLastPage()"
     aria-label="Siguiente"
   >
-    <app-icon [name]="'Arrow-double-small-right'" [width]="16" [height]="16" />
+    <app-icon
+      [name]="'Arrow-double-small-right'"
+      [width]="'16'"
+      [height]="'16'"
+    />
   </button>
 </div>

package/src/components-source/dropi-paginator/dropi-paginator.component.ts

@@ -1,38 +1,53 @@
-import { Component, Input, Output, EventEmitter, input } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { IconComponent } from '../icon/icon.component';
-import { TranslateModule } from '@ngx-translate/core';
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnInit,
+  OnChanges,
+  CUSTOM_ELEMENTS_SCHEMA,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { TranslateModule } from "@ngx-translate/core";
+import { IconComponent } from "../icon/icon.component";
 
 @Component({
-  selector: 'app-dropi-paginator',
+  selector: "app-dropi-paginator",
   standalone: true,
   imports: [CommonModule, IconComponent, TranslateModule],
-  templateUrl: './dropi-paginator.component.html',
-  styleUrls: ['./dropi-paginator.component.scss'],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: "./dropi-paginator.component.html",
+  styleUrls: ["./dropi-paginator.component.scss"],
 })
-export class DropiPaginatorComponent {
+export class DropiPaginatorComponent implements OnInit, OnChanges {
   @Input() totalPages: number = 1;
   @Input() currentPage: number = 1;
   @Input() disabled: boolean = false;
-  @Input() maxVisiblePages: number = 8; // Máximo de páginas visibles (ajustable)
   @Input() isNotTotalPages: boolean = false;
+  @Input() maxVisiblePages: number = 8;
   @Output() pageChange = new EventEmitter<number>();
 
-  constructor(translate: TranslateModule) {}
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  ngOnChanges(): void {}
 
   get pages(): (number | string)[] {
     const pages: (number | string)[] = [];
     const total = this.totalPages;
     const current = this.currentPage;
     const max = this.maxVisiblePages;
+
     if (total <= max) {
-      // Si hay pocas páginas, mostrar todas
       for (let i = 1; i <= total; i++) pages.push(i);
       return pages;
     }
-    const visible = max - 2; // Reservar espacio para el primer y último elemento
+
+    const visible = max - 2;
     let start = Math.max(2, current - Math.floor(visible / 2));
     let end = Math.min(total - 1, current + Math.floor(visible / 2));
+
     if (start <= 2) {
       start = 2;
       end = start + visible - 1;
@@ -41,45 +56,38 @@ export class DropiPaginatorComponent {
       end = total - 1;
       start = end - visible + 1;
     }
+
     pages.push(1);
-    if (start > 2) pages.push('...');
+    if (start > 2) pages.push("...");
     for (let i = start; i <= end; i++) pages.push(i);
-    if (end < total - 1) pages.push('...');
+    if (end < total - 1) pages.push("...");
     pages.push(total);
     return pages;
   }
 
-  goToPage(page: number) {
-    if (!this.disabled && page !== this.currentPage) {
+  public goToPage(page: any): void {
+    if (typeof page === "number") {
       this.pageChange.emit(page);
     }
   }
 
-  prevPage() {
-    if ((!this.disabled && this.currentPage > 1) || (!this.isNotTotalPages && !this.disabled)) {
+  public prevPage(): void {
+    if (this.currentPage > 1) {
       this.pageChange.emit(this.currentPage - 1);
     }
   }
 
-  nextPage() {
-    if (!this.disabled && (this.currentPage < this.totalPages || this.isNotTotalPages)) {
+  public nextPage(): void {
+    if (this.currentPage < this.totalPages || this.isNotTotalPages) {
       this.pageChange.emit(this.currentPage + 1);
     }
   }
 
-  goToFirstPage() {
-    if (this.currentPage !== 1) {
-      this.pageChange.emit(1);
-    }
+  public goToFirstPage(): void {
+    this.pageChange.emit(1);
   }
 
-  goToLastPage() {
-    if (this.currentPage !== this.totalPages) {
-      this.pageChange.emit(this.totalPages);
-    }
-  }
-  showFirstLastButtons(): boolean {
-    // si esta en la primera o última página no se muestran los botones
-    return this.currentPage > 1 && this.currentPage < this.totalPages;
+  public goToLastPage(): void {
+    this.pageChange.emit(this.totalPages);
   }
 }