tailjng 0.1.6 → 0.1.8

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,28 +118,29 @@
 </div>
 
 <!-- Content Filters -->
-<div class="select-none">
+<div class="select-none jfilter-filters-dialog-host">
   <JDialog
     [openModal]="dialogOpen"
     (closeModal)="dialogOpen = false"
     [dialogTemplate]="templateDialog"
     position="leftCenter"
-    title="Filtros"
+    title="FILTROS"
     [width]="220"
     height="auto"
     [overlay]="false"
     [draggable]="true"
+    [ngClasses]="{ 'jfilter-filters-dialog': true }"
   />
 </div>
 
 <ng-template #templateDialog>
-  <div class="m-0 pt-1">
+  <div class="m-0">
     @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="relative">
                 <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="relative">
                 <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="relative">
                 <JMultiTableSelect
                   [(ngModel)]="filter.selected"
                   (selectionChange)="

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

@@ -0,0 +1,25 @@
+: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;
+}

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

@@ -1,30 +1,69 @@
 import { Component, EventEmitter, Input, Output, OnDestroy, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { NgClass } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { LucideAngularModule } from 'lucide-angular';
 import { Subject, Subscription, debounceTime, filter, forkJoin } from 'rxjs';
-import { TableColumn, FilterButton, FilterSelect, JUploadFilterService, JAlertDialogService, JAlertToastService, JGenericCrudService, JIconsService, LoadingState, JExcelService, JExcelFilterService } from 'tailjng';
+import { TableColumn, FilterButton, FilterSelect, JUploadFilterService, JAlertDialogService, JAlertToastService, JGenericCrudService, LoadingState, JExcelService, JExcelFilterService } from 'tailjng';
 import { JDropdownSelectComponent } from '../../select/select-dropdown/dropdown-select.component';
 import { JMultiTableSelectComponent } from '../../select/select-multi-table/multi-table-select.component';
 import { JSwitchCheckboxComponent } from '../../checkbox/checkbox-switch/switch-checkbox.component';
 import { JDialogComponent } from '../../dialog/dialog.component';
 import { JButtonComponent } from '../../button/button.component';
-
+import type { CompleteFilterAdditionalButtonLoading } from './complete-filter.types';
+import { hasActiveFilters } from './complete-filter.util';
+import { Icons } from '../../.config/icons/icons.lucide';
+import { JIconComponent } from '../../icon/icon.component';
+
+export type {
+  CompleteFilterAdditionalButtonLoading,
+  CompleteFilterClearReason} from './complete-filter.types';
+export { hasActiveFilters } from './complete-filter.util';
+
+/**
+ * Filter bar with debounced search, items-per-page, column picker, filter dialog and action buttons.
+ *
+ * Install: `npx tailjng add filter-complete`
+ *
+ * ```html
+ * <JFilter
+ *   [endpoint]="endpoint"
+ *   [mainEndpoint]="mainEndpoint"
+ *   [columns]="columns"
+ *   [data]="data"
+ *   [(searchQuery)]="searchQuery"
+ *   (search)="onSearch()"
+ *   [(itemsPerPage)]="itemsPerPage"
+ *   [itemsPerPageOptions]="itemsPerPageOptions"
+ *   [filtersButton]="filtersButton"
+ *   [filtersSelect]="filtersSelect"
+ * />
+ * ```
+ */
 @Component({
   selector: 'JFilter',
   standalone: true,
-  imports: [LucideAngularModule, JDropdownSelectComponent, JMultiTableSelectComponent, JButtonComponent, JDialogComponent, FormsModule, JSwitchCheckboxComponent, NgClass],
+  imports: [
+    JIconComponent,
+    JDropdownSelectComponent,
+    JMultiTableSelectComponent,
+    JButtonComponent,
+    JDialogComponent,
+    FormsModule,
+    JSwitchCheckboxComponent,
+    NgClass,
+  ],
   templateUrl: './complete-filter.component.html',
   styleUrls: ['./complete-filter.component.scss'],
   providers: [JDialogComponent]
 })
 export class JCompleteFilterComponent implements OnInit, OnDestroy {
+  readonly Icons = Icons;
+
 
   @Output() afterUpload = new EventEmitter<void>();
 
   @Input() isLoadingSearch: boolean = false;
   @Input() isLoadingPerPage: boolean = false;
-  @Input() isLoadingAditionalButtons: { [key: string]: LoadingState } = {};
+  @Input() isLoadingAditionalButtons: CompleteFilterAdditionalButtonLoading = {};
 
   @Input() searchPlaceholder: string = 'Buscar...';
 
@@ -90,7 +129,6 @@ export class JCompleteFilterComponent implements OnInit, OnDestroy {
   @Output() checkActiveInactive = new EventEmitter<boolean>();
 
   constructor(
-    public readonly iconsService: JIconsService,
     private readonly alertToastService: JAlertToastService,
     private readonly alertDialogService: JAlertDialogService,
     private readonly uploadFilterService: JUploadFilterService,
@@ -184,8 +222,8 @@ export class JCompleteFilterComponent implements OnInit, OnDestroy {
       if (button.type === 'filter') {
         return {
           ...button,
-          icon: this.iconsService.icons.filter,
-          iconChange: this.iconsService.icons.filterList,
+          icon: Icons.Filter,
+          iconChange: Icons.ArrowDownWideNarrow,
           isChangeIcon: () => this.dialogOpen,
           tooltip: 'Filtros',
           clicked: () => {
@@ -199,18 +237,11 @@ export class JCompleteFilterComponent implements OnInit, OnDestroy {
       if (button.type === 'clear') {
         return {
           ...button,
-          icon: this.iconsService.icons.eraser,
-          iconChange: this.iconsService.icons.transh,
+          icon: Icons.Eraser,
+          iconChange: Icons.Trash2,
           tooltip: 'Limpiar filtros',
           clicked: () => {
-            const hasActiveSearch = this.searchQuery?.trim().length > 0;
-            const hasSelectedFilters = this.filtersSelect.some(f => {
-              const actual = f.selected;
-              const inicial = f.initSelected ?? null;
-              return JSON.stringify(actual) !== JSON.stringify(inicial);
-            });
-
-            if (!hasActiveSearch && !hasSelectedFilters) {
+            if (!hasActiveFilters(this.searchQuery, this.filtersSelect)) {
               this.alertToastService.AlertToast({
                 type: 'info',
                 title: 'No se ha filtrado nada...',
@@ -221,8 +252,10 @@ export class JCompleteFilterComponent implements OnInit, OnDestroy {
               return;
             }
 
+            const hadActiveSearch = this.searchQuery?.trim().length > 0;
+
             // Limpiar búsqueda
-            if (hasActiveSearch) {
+            if (hadActiveSearch) {
               this.clearSearch();
             }
 
@@ -244,15 +277,7 @@ export class JCompleteFilterComponent implements OnInit, OnDestroy {
             }
             this.clearFilters.emit('clear');
           },
-          isChangeIcon: () => {
-            const hasActiveSearch = this.searchQuery?.trim().length > 0;
-            const hasSelectedFilters = this.filtersSelect.some(f => {
-              const actual = f.selected;
-              const inicial = f.initSelected ?? null;
-              return JSON.stringify(actual) !== JSON.stringify(inicial);
-            });
-            return !(!hasActiveSearch && !hasSelectedFilters);
-          },
+          isChangeIcon: () => hasActiveFilters(this.searchQuery, this.filtersSelect),
           classes: 'bg-[#164666] hover:bg-[#133d5a] text-white'
         };
       }
@@ -261,7 +286,7 @@ export class JCompleteFilterComponent implements OnInit, OnDestroy {
       if (button.type === 'excel') {
         return {
           ...button,
-          icon: this.iconsService.icons.fileSpreadsheet,
+          icon: Icons.FileSpreadsheet,
           tooltip: 'Exportar a Excel',
           clicked: () => {
 
@@ -276,7 +301,7 @@ export class JCompleteFilterComponent implements OnInit, OnDestroy {
                   // Activar el estado de carga
                   this.isLoadingAditionalButtons['excel'] = 'loading';
 
-                  const params = { ...this.params, limit: "1000000000", }
+                  const params = { ...this.params, limit: "1000000000"}
 
                   this.genericService.findAll<any>({ endpoint: this.endpoint, params }).subscribe({
                     next: (response) => {
@@ -336,8 +361,8 @@ export class JCompleteFilterComponent implements OnInit, OnDestroy {
       if (button.type === 'upload') {
         return {
           ...button,
-          icon: this.iconsService.icons.fileUp,
-          iconChange: this.iconsService.icons.listRestart,
+          icon: Icons.FileUp,
+          iconChange: Icons.ListRestart,
           isChangeIcon: () => this.dialogOpenCharge,
           tooltip: 'Cargar datos',
           clicked: () => {
@@ -382,8 +407,7 @@ export class JCompleteFilterComponent implements OnInit, OnDestroy {
                   error: reject
                 });
 
-              }),
-            })
+              })})
 
           },
           classes: 'bg-[#1565c0] hover:bg-[#0d47a1] text-white'