tailjng 0.1.6 → 0.1.7

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

@@ -1,163 +1,152 @@
-import { Component, Input, TemplateRef, CUSTOM_ELEMENTS_SCHEMA, Output, EventEmitter, HostListener, OnChanges, SimpleChanges } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
+import {
+  Component,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+  TemplateRef,
+} from '@angular/core';
 import { trigger, transition, style, animate } from '@angular/animations';
-import { LucideAngularModule } from 'lucide-angular';
-import { JIconsService } from 'tailjng';
-
+import { Icons } from '../.config/icons/icons.lucide';
+import { JIconComponent } from '../icon/icon.component';
+import { DialogOffset, DialogPosition, DialogSize } from './dialog.types';
+
+export type { DialogOffset, DialogPosition, DialogSize } from './dialog.types';
+
+const POSITION_CLASS_MAP: Record<DialogPosition, string> = {
+  center: 'justify-center items-center',
+  leftCenter: 'justify-start items-center',
+  rightCenter: 'justify-end items-center',
+  topCenter: 'justify-center items-start',
+  bottomCenter: 'justify-center items-end',
+  leftTop: 'justify-start items-start',
+  leftBottom: 'justify-start items-end',
+  rightTop: 'justify-end items-start',
+  rightBottom: 'justify-end items-end',
+};
+
+/**
+ * Modal dialog with optional overlay, positioning, drag handle, and template content.
+ *
+ * Install: `npx tailjng add dialog`
+ */
 @Component({
   selector: 'JDialog',
-  imports: [LucideAngularModule, CommonModule],
+  imports: [NgClass, NgStyle, NgTemplateOutlet, JIconComponent],
   templateUrl: './dialog.component.html',
   styleUrl: './dialog.component.css',
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   animations: [
     trigger('modalTransition', [
       transition(':enter', [
         style({ transform: 'translateY(1rem)', opacity: 0 }),
-        animate('300ms ease-out', style({ transform: 'translateY(0)', opacity: 1 }))
+        animate('300ms ease-out', style({ transform: 'translateY(0)', opacity: 1 })),
       ]),
       transition(':leave', [
-        animate('150ms ease-in', style({ transform: 'translateY(1rem)', opacity: 0 }))
-      ])
-    ])
-  ]
+        animate('150ms ease-in', style({ transform: 'translateY(1rem)', opacity: 0 })),
+      ]),
+    ]),
+  ],
 })
 export class JDialogComponent implements OnChanges {
+  readonly Icons = Icons;
 
-  @Input() position:
-    | 'center'
-    | 'leftCenter'
-    | 'rightCenter'
-    | 'topCenter'
-    | 'bottomCenter'
-    | 'leftTop'
-    | 'leftBottom'
-    | 'rightTop'
-    | 'rightBottom' = 'center';
-
-  @Input() offset: { top?: number, bottom?: number, left?: number, right?: number } = {};
+  @Input() position: DialogPosition = 'center';
+  @Input() offset: DialogOffset = {};
 
   @Input() openModal = false;
   @Output() closeModal = new EventEmitter<void>();
 
   @Input() title = 'Dialog Title';
-  @Input() dialogTemplate!: TemplateRef<any>;
+  @Input() dialogTemplate!: TemplateRef<unknown>;
+
+  @Input() width: DialogSize = 500;
+  @Input() height: DialogSize = 300;
 
-  @Input() width: number | 'auto' | 'full' = 500;
-  @Input() height: number | 'auto' | 'full' = 300;
+  @Input() overlay = true;
+  @Input() draggable = false;
+  @Input() closeOnEscape = true;
 
-  @Input() overlay: boolean = true;
-  @Input() draggable: boolean = false;
+  /** Extra conditional classes on the dialog panel. */
+  @Input() ngClasses: Record<string, boolean> = {};
 
   private isDragging = false;
   private hasMoved = false;
   private dragOffset = { x: 0, y: 0 };
 
-  constructor(
-    public readonly iconsService: JIconsService
-  ) { }
-
-  ngOnChanges(changes: SimpleChanges) {
+  ngOnChanges(changes: SimpleChanges): void {
     if (changes['openModal']?.currentValue === true) {
       this.hasMoved = false;
     }
   }
 
-
   /**
-   * Opens the dialog.
+   * Opens the dialog programmatically (e.g. when provided via `providers`).
    */
-  onOpen() {
+  onOpen(): void {
     this.hasMoved = false;
     this.openModal = true;
   }
 
-
-
   /**
-   * Closes the dialog.
+   * Emits `closeModal` so the parent can hide the dialog.
    */
-  onClose() {
+  onClose(): void {
     this.closeModal.emit();
   }
 
-
-
-  /**
-   * Gets the width of the modal.
-   * @returns The width of the modal.
-   */
-  getModalWidth(): string {
-    if (this.width === 'auto') return 'auto';
-    if (typeof this.width === 'number') return `${this.width}px`;
-    if (this.width === 'full') return '90vw';
-    return `${this.width || 100}px`;
-  }
-
-
-
   /**
-   * Gets the height of the modal.
-   * @returns The height of the modal.
+   * Whether width or height is set to full viewport.
    */
-  getModalHeight(): string {
-    if (this.height === 'auto') return 'auto';
-    if (typeof this.height === 'number') return `${this.height}px`;
-    if (this.height === 'full') return '90vh';
-    return `${this.height || 40}px`;
+  get isFullScreen(): boolean {
+    return this.width === 'full' || this.height === 'full';
   }
 
-
-
   /**
-   * Checks if the modal is in full-screen mode.
-   * @returns True if the modal is full-screen, false otherwise.
+   * Resolved panel width for inline styles.
    */
-  isFullScreen(): boolean {
-    return this.width === 'full' || this.height === 'full';
+  get modalWidth(): string {
+    if (this.width === 'auto') {
+      return 'auto';
+    }
+    if (typeof this.width === 'number') {
+      return `${this.width}px`;
+    }
+    if (this.width === 'full') {
+      return '90vw';
+    }
+    return '500px';
   }
 
-
-
   /**
-   * Handles the escape key press event.
-   * @param event The keyboard event.
+   * Resolved panel height for inline styles.
    */
-  @HostListener('document:keydown.escape')
-  handleEscape() {
-    if (this.openModal) {
-      this.onClose();
+  get modalHeight(): string {
+    if (this.height === 'auto') {
+      return 'auto';
+    }
+    if (typeof this.height === 'number') {
+      return `${this.height}px`;
     }
+    if (this.height === 'full') {
+      return '90vh';
+    }
+    return '300px';
   }
 
-
-
   /**
-   * Gets the position class for the modal.
-   * @returns The position class for the modal.
+   * Flex alignment classes for the dialog shell.
    */
-  getPositionClass(): string {
-    switch (this.position) {
-      case 'leftCenter': return 'justify-start items-center';
-      case 'rightCenter': return 'justify-end items-center';
-      case 'topCenter': return 'justify-center items-start';
-      case 'bottomCenter': return 'justify-center items-end';
-      case 'leftTop': return 'justify-start items-start';
-      case 'leftBottom': return 'justify-start items-end';
-      case 'rightTop': return 'justify-end items-start';
-      case 'rightBottom': return 'justify-end items-end';
-      case 'center':
-      default: return 'justify-center items-center';
-    }
+  get positionClass(): string {
+    return POSITION_CLASS_MAP[this.position] ?? POSITION_CLASS_MAP.center;
   }
 
-
-
   /**
-   * Gets the offset styles for the modal.
-   * @returns The offset styles for the modal.
+   * Margin offsets applied to the panel.
    */
-  getOffsetStyles(): { [key: string]: string } {
+  get offsetStyles(): Record<string, string> {
     return {
       marginTop: this.offset.top !== undefined ? `${this.offset.top}px` : '',
       marginBottom: this.offset.bottom !== undefined ? `${this.offset.bottom}px` : '',
@@ -166,28 +155,64 @@ export class JDialogComponent implements OnChanges {
     };
   }
 
+  /**
+   * Class map for the dialog panel shell.
+   */
+  get panelClasses(): Record<string, boolean> {
+    return {
+      'pointer-events-auto': true,
+      'overflow-hidden': true,
+      'bg-background': true,
+      'dark:bg-dark-background': true,
+      'rounded-xl': true,
+      'shadow-2xl': true,
+      'border': true,
+      'border-border': true,
+      'dark:border-dark-border': true,
+      ...this.ngClasses,
+    };
+  }
+
+  /**
+   * Class map for the scrollable content region.
+   */
+  get contentClasses(): Record<string, boolean> {
+    return {
+      'jdialog-full': this.isFullScreen,
+    };
+  }
 
+  @HostListener('document:keydown.escape')
+  handleEscape(): void {
+    if (this.openModal && this.closeOnEscape) {
+      this.onClose();
+    }
+  }
 
   /**
-   * Starts the drag operation.
-   * @param event The mouse event.
-   * @returns
+   * Starts dragging when `draggable` is enabled.
    */
-  startDrag(event: MouseEvent) {
-    if (!this.draggable) return;
+  startDrag(event: MouseEvent): void {
+    if (!this.draggable) {
+      return;
+    }
 
+    event.stopPropagation();
     this.isDragging = true;
 
-    const dialogElement = (event.currentTarget as HTMLElement).closest('[data-draggable-dialog]') as HTMLElement;
-    if (!dialogElement) return;
+    const dialogElement = (event.currentTarget as HTMLElement).closest(
+      '[data-draggable-dialog]',
+    ) as HTMLElement | null;
+    if (!dialogElement) {
+      return;
+    }
 
     const rect = dialogElement.getBoundingClientRect();
     this.dragOffset = {
       x: event.clientX - rect.left,
-      y: event.clientY - rect.top
+      y: event.clientY - rect.top,
     };
 
-    // Only set position if it hasn't been moved before (respects initial offset)
     if (!this.hasMoved) {
       const computedTop = this.offset.top ?? rect.top;
       const computedLeft = rect.left;
@@ -203,7 +228,9 @@ export class JDialogComponent implements OnChanges {
     }
 
     const mouseMoveHandler = (moveEvent: MouseEvent) => {
-      if (!this.isDragging) return;
+      if (!this.isDragging) {
+        return;
+      }
 
       const newLeft = moveEvent.clientX - this.dragOffset.x;
       const newTop = moveEvent.clientY - this.dragOffset.y;
@@ -224,5 +251,4 @@ export class JDialogComponent implements OnChanges {
     document.addEventListener('mousemove', mouseMoveHandler);
     document.addEventListener('mouseup', mouseUpHandler);
   }
-
 }

package/src/lib/components/dialog/dialog.types.ts

@@ -0,0 +1,19 @@
+export type DialogPosition =
+  | 'center'
+  | 'leftCenter'
+  | 'rightCenter'
+  | 'topCenter'
+  | 'bottomCenter'
+  | 'leftTop'
+  | 'leftBottom'
+  | 'rightTop'
+  | 'rightBottom';
+
+export type DialogSize = number | 'auto' | 'full';
+
+export type DialogOffset = {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+};

package/src/lib/components/filter/filter-complete/complete-filter.component.html

@@ -19,11 +19,9 @@
           class="absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center gap-2"
         >
           @if (isLoadingSearch) {
-            <lucide-icon
-              [name]="iconsService.icons.loading"
+            <JIcon [icon]="Icons.Loader2"
               size="18"
-              class="text-gray-400 animate-spin"
-            ></lucide-icon>
+              iconClass="text-gray-400 animate-spin" [ariaHidden]="true" />
           }
 
           @if (searchQuery && !isLoadingSearch) {
@@ -32,19 +30,15 @@
               class="pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer"
               aria-label="Limpiar búsqueda"
             >
-              <lucide-icon
-                [name]="iconsService.icons.close"
-                size="16"
-              ></lucide-icon>
+              <JIcon [icon]="Icons.X"
+                size="16" [ariaHidden]="true" />
             </button>
           }
 
           @if (!isLoadingSearch && !searchQuery) {
-            <lucide-icon
-              [name]="iconsService.icons.search"
+            <JIcon [icon]="Icons.Search"
               size="16"
-              class="text-gray-400"
-            ></lucide-icon>
+              iconClass="text-gray-400" [ariaHidden]="true" />
           }
         </div>
       </div>
@@ -81,7 +75,7 @@
   <div
     class="flex gap-3 text-sm w-full md:w-auto md:justify-center justify-between"
   >
-    <div class="flex flex-row flex-wrap gap-2">
+    <div class="flex flex-row flex-wrap gap-2 items-center">
       @for (button of filtersButton; track $index) {
         @if (getIsVisible(button)) {
           <JButton
@@ -124,7 +118,7 @@
 </div>
 
 <!-- Content Filters -->
-<div class="select-none">
+<div class="select-none jfilter-filters-dialog-host">
   <JDialog
     [openModal]="dialogOpen"
     (closeModal)="dialogOpen = false"
@@ -135,17 +129,18 @@
     height="auto"
     [overlay]="false"
     [draggable]="true"
+    [ngClasses]="{ 'jfilter-filters-dialog': true }"
   />
 </div>
 
 <ng-template #templateDialog>
-  <div class="m-0 pt-1">
+  <div class="jfilter-filters-dialog-body">
     @if (filtersSelect.length > 0) {
       <div class="flex flex-col gap-2">
         @for (filter of filtersSelect; track $index) {
           @if (filter.isVisible ?? true) {
             @if (filter.type === "dropdown") {
-              <div>
+              <div class="jfilter-filters-dialog-field">
                 <JDropdownSelect
                   [type]="'dropdown'"
                   [(ngModel)]="filter.selected"
@@ -160,13 +155,14 @@
                   [options]="filter.options"
                   [sort]="filter.sort ?? 'ASC'"
                   [showAllOption]="filter.showAllOption ?? false"
+                  [isFilterSelect]="true"
                 />
               </div>
             }
 
             <!-- Searchable -->
             @if (filter.type === "searchable") {
-              <div>
+              <div class="jfilter-filters-dialog-field">
                 <JDropdownSelect
                   [type]="'searchable'"
                   [(ngModel)]="filter.selected"
@@ -180,15 +176,16 @@
                   [loadOnInit]="filter.loadOnInit ?? false"
                   [isSearch]="filter.isSearch ?? true"
                   [searchFields]="filter.searchFields || []"
-                  [defaultFilters]="filter.defaultFilters || []"
+                  [defaultFilters]="filter.defaultFilters || {}"
                   [sort]="filter.sort ?? 'ASC'"
                   [showAllOption]="filter.showAllOption ?? false"
+                  [isFilterSelect]="true"
                 />
               </div>
             }
 
             @if (filter.type === "multi-table") {
-              <div>
+              <div class="jfilter-filters-dialog-field">
                 <JMultiTableSelect
                   [(ngModel)]="filter.selected"
                   (selectionChange)="

package/src/lib/components/filter/filter-complete/complete-filter.component.scss

@@ -0,0 +1,35 @@
+/* Scoped overrides for the filters JDialog only — does not affect JDialog globally. */
+
+:host ::ng-deep .jfilter-filters-dialog-host .jfilter-filters-dialog.jdialog-panel {
+  overflow: hidden;
+  border-radius: 0.75rem;
+}
+
+:host ::ng-deep .jfilter-filters-dialog-host .jfilter-filters-dialog .jdialog-header {
+  min-height: 2.125rem;
+  padding: 0.3125rem 0.5rem 0.3125rem 0.75rem;
+  gap: 0.5rem;
+}
+
+:host ::ng-deep .jfilter-filters-dialog-host .jfilter-filters-dialog .jdialog-title {
+  font-size: 0.8125rem;
+  line-height: 1.2;
+}
+
+:host ::ng-deep .jfilter-filters-dialog-host .jfilter-filters-dialog .jdialog-close {
+  width: 1.625rem;
+  height: 1.625rem;
+  flex: 0 0 1.625rem;
+}
+
+:host ::ng-deep .jfilter-filters-dialog-host .jfilter-filters-dialog .jdialog-content {
+  padding: 0.5rem 0.625rem 0.625rem;
+}
+
+.jfilter-filters-dialog-body {
+  margin: 0;
+}
+
+.jfilter-filters-dialog-field {
+  position: relative;
+}