@dropi/ui-components 1.0.0

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

@@ -0,0 +1,392 @@
+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';
+
+@Component({
+  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,
+})
+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 {
+    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();
+  }
+
+  @HostListener('document:keydown.escape', ['$event'])
+  onEscape(event: KeyboardEvent): void {
+    if (!this.visible) {
+      return;
+    }
+
+    if (!this.closeOnEscape || !this.dismissible) {
+      return;
+    }
+
+    event.preventDefault();
+    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;
+    }
+
+    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;
+  }
+}

package/src/components-source/dropi-modal/p-template.directive.ts

@@ -0,0 +1,11 @@
+import { Directive, Input, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: 'ng-template[pTemplate]',
+  standalone: true,
+})
+export class PTemplateDirective {
+  @Input('pTemplate') type: string | null = null;
+
+  constructor(public readonly template: TemplateRef<unknown>) {}
+}

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

@@ -0,0 +1,41 @@
+<aside class="sidebar">
+  <div class="sidebar-header">
+    <h4>{{ title }}</h4>
+    <span class="indicator-dot"></span>
+  </div>
+  <ul class="nav-list">
+    <li *ngFor="let item of sidebarItems" class="nav-list-item">
+      <button
+        (click)="handleItemClick(item)"
+        class="nav-item"
+        [class.parent-active]="
+          (item.expanded && item.children && item.children.length > 0) || item === activeItem
+        "
+      >
+        <span class="font-semibold">{{ item?.name.value }}</span>
+        <i
+          *ngIf="item.children && item.children.length > 0"
+          class="fas fa-chevron-right dropdown-icon"
+          [class.rotated]="item.expanded"
+        ></i>
+      </button>
+      <div
+        class="sub-menu-container"
+        [class.open]="item.expanded"
+        *ngIf="item.children && item.children.length > 0"
+      >
+        <ul class="sub-list">
+          <li *ngFor="let subItem of item.children">
+            <button
+              (click)="handleItemClick(subItem)"
+              class="nav-item sub-item"
+              [class.active]="subItem === activeItem"
+            >
+              {{ subItem?.name.value }}
+            </button>
+          </li>
+        </ul>
+      </div>
+    </li>
+  </ul>
+</aside>

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

@@ -0,0 +1,227 @@
+:root {
+  --primary-color: #f97316;
+  --light-gray: #f8fafc;
+  --border-color: #e2e8f0;
+  --text-primary: #1e293b;
+  --text-secondary: #64748b;
+  --transition-speed: 0.25s;
+  font-family: 'Inter', sans-serif;
+}
+
+body {
+  background-color: var(--light-gray);
+}
+
+.page-container {
+  padding: 2rem;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+
+.btn {
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid transparent;
+  transition:
+    background-color var(--transition-speed),
+    color var(--transition-speed);
+}
+
+.btn-primary {
+  background-color: var(--primary-color);
+  color: white;
+  border-color: var(--primary-color);
+}
+.btn-primary:hover {
+  background-color: #fb923c;
+}
+
+.btn-secondary {
+  background-color: white;
+  color: var(--text-primary);
+  border-color: var(--border-color);
+}
+.btn-secondary:hover {
+  background-color: #f1f5f9;
+}
+
+.btn-edit {
+  background-color: white;
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  font-weight: 600;
+  padding: 0.5rem 1.5rem;
+  border-radius: 0.5rem;
+}
+.btn-edit:hover {
+  background-color: #f1f5f9;
+}
+
+.layout-container {
+  display: flex;
+  gap: 2rem;
+  min-height: 70vh;
+}
+
+.sidebar {
+  width: 280px;
+  flex-shrink: 0;
+  background-color: white;
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  border: 1px solid var(--border-color);
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+  h4 {
+    margin: 0;
+  }
+}
+
+.indicator-dot {
+  width: 0.75rem;
+  height: 0.75rem;
+  background-color: var(--primary-color);
+  border-radius: 9999px;
+}
+
+.nav-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.nav-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  text-align: left;
+  color: var(--text-primary);
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  transition:
+    background-color var(--transition-speed),
+    color var(--transition-speed);
+  font-size: 0.9rem;
+  position: relative;
+}
+
+.nav-item:hover {
+  background-color: #f1f5f9;
+}
+
+.nav-item.parent-active {
+  background-color: #f1f5f9;
+}
+
+.nav-item.parent-active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.5rem;
+  bottom: 0.5rem;
+  width: 3px;
+  background-color: var(--primary-color);
+  border-radius: 9999px;
+}
+
+.dropdown-icon {
+  font-size: 0.7rem;
+  color: var(--text-secondary);
+  transition: transform var(--transition-speed) ease-in-out;
+}
+
+.dropdown-icon.rotated {
+  transform: rotate(90deg);
+}
+
+.sub-list {
+  padding-left: 1rem;
+  margin-top: 0.25rem;
+  list-style-type: none;
+}
+
+.sub-item {
+  justify-content: flex-start;
+  color: var(--text-secondary);
+  font-weight: 500;
+  position: relative;
+  padding-left: 1.25rem;
+}
+
+.sub-item.active {
+  background-color: #f1f5f9;
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.sub-item.active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.5rem;
+  bottom: 0.5rem;
+  width: 3px;
+  background-color: var(--primary-color);
+  border-radius: 9999px;
+  list-style: none;
+}
+
+.sub-menu-container {
+  overflow: hidden;
+  max-height: 0;
+  height: auto;
+  font-weight: var(--font-weight-medium);
+  gap: var(--Size-3);
+  font-size: var(--font-size-s);
+  cursor: pointer;
+  opacity: 0;
+  padding: 0 var(--Size-3) 0 var(--Size-8);
+  transition:
+    max-height 0.3s ease-out,
+    opacity 0.3s ease-out,
+    padding 0.3s ease-out;
+}
+
+.sub-menu-container.open {
+  max-height: 1000px;
+  opacity: 1;
+  padding: var(--Size-3) var(--Size-3) var(--Size-3) var(--Size-2);
+}
+
+.sub-menu-container-default {
+  color: var(--Gray-Gray-500);
+}
+
+.main-content {
+  flex: 1;
+  background-color: white;
+  border-radius: 0.75rem;
+  padding: 1.5rem 2rem;
+  border: 1px solid var(--border-color);
+  margin-left: 0;
+}
+
+.content-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--border-color);
+}