tailjng 0.0.13 → 0.0.15

package/src/lib/components/select/multi-dropdown/multi-dropdown.component.html

@@ -0,0 +1,87 @@
+<div class="relative w-full h-full">
+    <!-- Botón para multi-dropdown -->
+    <div class="w-auto" #selectButton>
+        <button type="button" 
+                [disabled]="disabled || isLoading" 
+                (click)="toggleDropdown()"
+                class="flex w-full h-[40px] items-center justify-between px-3 py-2 text-sm bg-background dark:bg-dark-background border border-border dark:border-dark-border rounded focus:outline-none focus:ring-2 focus:ring-primary select-none"
+                [ngClass]="{ 'opacity-50 cursor-not-allowed pointer-events-none': disabled || isLoading }">
+            <span class="truncate text-black dark:text-white" 
+                  [ngClass]="{ 'opacity-50': selectedValues.length === 0 }">
+                {{ displayLabel }}
+            </span>
+            <div class="flex items-center">
+                @if (showClear && selectedValues.length > 0) {
+                <button type="button" 
+                        (click)="clearSelection($event)"
+                        class="pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer">
+                    <lucide-icon [name]="icons.x" size="14"></lucide-icon>
+                </button>
+                }
+                @if (!isLoading) {
+                <lucide-icon [name]="icons.chevronDown" 
+                             size="16" 
+                             class="transition duration-300 ease-in-out text-gray-400"
+                             [ngClass]="{ 'rotate-180': isDropdownOpen }"></lucide-icon>
+                } @else {
+                <lucide-icon [name]="icons.loading" 
+                             size="16" 
+                             class="text-gray-400 animate-spin"></lucide-icon>
+                }
+            </div>
+        </button>
+    </div>
+</div>
+
+<!-- Dropdown positioned outside the flow -->
+@if (isDropdownOpen) {
+<div @modalTransition
+     class="absolute z-[100] min-w-[250px] mt-1 bg-background dark:bg-dark-background rounded-lg shadow-lg border border-border border-dark-border"
+     [style.width.px]="dropdownWidth"
+     [style.top.px]="dropdownTop" 
+     [style.left.px]="dropdownLeft">
+    <div class="pt-1 pl-3 pr-3 pb-3">
+        <div class="text-[10px] font-medium text-gray-500 dark:text-gray-500 mb-1">{{title}}</div>
+        
+        <!-- Multi-Dropdown Options -->
+        <div class="max-h-60 overflow-auto flex flex-col gap-1 scroll-element">
+            <!-- Select All Option -->
+             
+            @if (processedOptions.length > 0) {
+              @if (enableSelectAll) {
+              <div (click)="toggleSelectAll()"
+                  class="flex gap-5 items-center border border-accent dark:border-dark-accent/50 px-4 py-2 cursor-pointer group rounded-md transition-all hover:bg-accent dark:hover:bg-dark-accent/50"
+                  [ngClass]="{'bg-accent dark:bg-dark-accent/50': isAllSelected()}">
+                  <input type="checkbox" class="hidden" [checked]="isAllSelected()" />
+                  @if (isAllSelected()) {
+                  <lucide-icon [name]="icons.check" size="15" class="transition text-black dark:text-white" />
+                  } @else {
+                  <lucide-icon [name]="icons.squareDashedMousePointer" size="15" class="transition text-black dark:text-white opacity-40" />
+                  }
+                  <label class="text-black dark:text-white text-sm font-medium w-full">{{ labelSelectAll }}</label>
+              </div>
+              }
+              
+              <!-- Individual Options -->
+              @for (option of processedOptions; track option.value) {
+              <div (click)="toggleOption(option)"
+                  class="flex gap-5 items-center border border-accent dark:border-dark-accent/50 px-4 py-2 cursor-pointer group rounded-md transition-all hover:bg-accent dark:hover:bg-dark-accent/50"
+                  [ngClass]="{'bg-accent dark:bg-dark-accent/50' : selectedValues.includes(option.value)}">
+                  <input type="checkbox" class="hidden" [checked]="selectedValues.includes(option.value)" />
+                  @if (selectedValues.includes(option.value)) {
+                  <lucide-icon [name]="icons.check" size="15" class="transition text-black dark:text-white" />
+                  } @else {
+                  <lucide-icon [name]="icons.squareDashedMousePointer" size="15" class="transition text-black dark:text-white opacity-40" />
+                  }
+                  <label class="text-black dark:text-white text-sm font-medium w-full">{{ option.text }}</label>
+              </div>
+              }
+            }
+            
+            @if (processedOptions.length === 0) {
+            <div class="px-3 py-2 text-sm text-gray-500">No hay opciones disponibles</div>
+            }
+        </div>
+    </div>
+</div>
+}

package/src/lib/components/select/multi-dropdown/multi-dropdown.component.ts

@@ -0,0 +1,315 @@
+import { Component, Input, Output, EventEmitter, ElementRef, ViewChild, OnDestroy, ChangeDetectorRef, AfterViewInit, OnInit, SimpleChanges, OnChanges, } from "@angular/core"
+import { FormsModule, type ControlValueAccessor, ReactiveFormsModule, NG_VALUE_ACCESSOR } from "@angular/forms"
+import { CommonModule } from "@angular/common"
+import { X, LucideAngularModule, ChevronDown, Check, Loader2, SquareDashedMousePointer } from "lucide-angular"
+import { animate, style, transition, trigger } from "@angular/animations"
+
+interface ProcessedOption {
+  value: any
+  text: string
+  original?: any
+}
+
+@Component({
+  selector: "JMultiDropdownSelect",
+  imports: [LucideAngularModule, CommonModule, FormsModule, ReactiveFormsModule],
+  templateUrl: "./multi-dropdown.component.html",
+  styleUrl: "./multi-dropdown.component.css",
+  animations: [
+    trigger("modalTransition", [
+      transition(":enter", [
+        style({ transform: "translateX(1rem)", opacity: 0 }),
+        animate("300ms ease-out", style({ transform: "translateY(0)", opacity: 1 })),
+      ]),
+      transition(":leave", [animate("150ms ease-in", style({ transform: "translateX(1rem)", opacity: 0 }))]),
+    ]),
+  ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: JMultiDropdownSelectComponent,
+      multi: true,
+    },
+  ],
+})
+export class JMultiDropdownSelectComponent implements ControlValueAccessor, AfterViewInit, OnInit, OnChanges, OnDestroy {
+  // Lucide icons
+  icons = {
+    chevronDown: ChevronDown,
+    x: X,
+    check: Check,
+    loading: Loader2,
+    squareDashedMousePointer: SquareDashedMousePointer,
+  }
+
+  @Input() title = "Seleccionar opciones"
+  @Input() placeholder = "Seleccione opciones"
+  @Input() showClear = true
+  @Input() disabled = false
+  @Input() isLoading = false
+
+  // Opciones y configuración
+  @Input() options: any[] = []
+  @Input() optionLabel: string | string[] = "text"
+  @Input() optionValue = "value"
+  @Input() labelSeparator = " "
+
+  // Multi-selection específico
+  @Input() enableSelectAll = true
+  @Input() labelSelectAll = "TODOS"
+  @Input() multipleSeparator = ", "
+  @Input() maxDisplayItems = 3 // Máximo de items a mostrar antes de "X más"
+
+  @Output() selectionChange = new EventEmitter<any[]>()
+
+  @ViewChild("selectButton") selectButton!: ElementRef
+
+  // Estado del componente
+  isDropdownOpen = false
+  selectedValues: any[] = []
+  processedOptions: ProcessedOption[] = []
+  displayLabel = ""
+
+  // Dropdown positioning
+  dropdownTop = 0
+  dropdownLeft = 0
+  dropdownWidth = 0
+
+  // ControlValueAccessor
+  private onChange: any = () => { }
+  private onTouched: any = () => { }
+
+  // Click outside listener
+  private clickOutsideListener: any
+
+  constructor(
+    private readonly cdr: ChangeDetectorRef,
+    private readonly elementRef: ElementRef,
+  ) { }
+
+  ngOnInit() {
+    this.updateDisplayLabel()
+  }
+
+  ngAfterViewInit() {
+    this.setupClickOutsideListener()
+    setTimeout(() => {
+      this.processOptions()
+    })
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes["options"]) {
+      this.processOptions()
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.clickOutsideListener) {
+      document.removeEventListener("click", this.clickOutsideListener)
+    }
+  }
+
+  // ======================================================
+  // Procesamiento de opciones
+  // ======================================================
+
+  processOptions() {
+    this.processedOptions = []
+
+    if (this.options && this.options.length > 0 && typeof this.options[0] !== "object") {
+      // Opciones simples (string, number)
+      this.processedOptions = this.options.map((option) => ({
+        value: option,
+        text: option.toString(),
+      }))
+    } else if (this.options && this.options.length > 0) {
+      // Opciones complejas (objetos)
+      this.processedOptions = this.options.map((option) => {
+        const text = Array.isArray(this.optionLabel)
+          ? this.optionLabel.map((k) => this.getNestedValue(option, k)).join(this.labelSeparator)
+          : this.getNestedValue(option, this.optionLabel)
+        return {
+          value: option[this.optionValue],
+          text,
+          original: option,
+        }
+      })
+    }
+
+    this.updateDisplayLabel()
+    this.cdr.detectChanges()
+  }
+
+  // ======================================================
+  // Manejo de selección múltiple
+  // ======================================================
+
+  toggleOption(option: ProcessedOption) {
+    const index = this.selectedValues.findIndex((v) => v === option.value)
+
+    if (index > -1) {
+      // Deseleccionar
+      this.selectedValues.splice(index, 1)
+    } else {
+      // Seleccionar
+      this.selectedValues.push(option.value)
+    }
+
+    this.updateDisplayLabel()
+    this.onChange(this.selectedValues)
+    this.selectionChange.emit(this.selectedValues)
+  }
+
+  toggleSelectAll() {
+    const allValues = this.processedOptions.map((opt) => opt.value)
+
+    if (this.isAllSelected()) {
+      // Deseleccionar todos
+      this.selectedValues = []
+    } else {
+      // Seleccionar todos
+      this.selectedValues = [...allValues]
+    }
+
+    this.updateDisplayLabel()
+    this.onChange(this.selectedValues)
+    this.selectionChange.emit(this.selectedValues)
+  }
+
+  isAllSelected(): boolean {
+    const allValues = this.processedOptions.map((opt) => opt.value)
+    return allValues.length > 0 && allValues.every((v) => this.selectedValues.includes(v))
+  }
+
+  clearSelection(event: Event) {
+    event.stopPropagation()
+    this.selectedValues = []
+    this.updateDisplayLabel()
+    this.onChange(this.selectedValues)
+    this.selectionChange.emit(this.selectedValues)
+  }
+
+  // ======================================================
+  // Display y UI
+  // ======================================================
+
+  updateDisplayLabel() {
+    if (this.selectedValues.length === 0) {
+      this.displayLabel = this.placeholder
+      return
+    }
+
+    // Verificar si todos están seleccionados
+    if (this.enableSelectAll && this.isAllSelected()) {
+      this.displayLabel = this.labelSelectAll
+      return
+    }
+
+    // Obtener textos de las opciones seleccionadas
+    const selectedTexts = this.processedOptions
+      .filter((opt) => this.selectedValues.includes(opt.value))
+      .map((opt) => opt.text)
+
+    if (selectedTexts.length <= this.maxDisplayItems) {
+      // Mostrar todos los elementos
+      this.displayLabel = selectedTexts.join(this.multipleSeparator)
+    } else {
+      // Mostrar algunos elementos + "X más"
+      const visibleItems = selectedTexts.slice(0, this.maxDisplayItems)
+      const remainingCount = selectedTexts.length - this.maxDisplayItems
+      this.displayLabel = `${visibleItems.join(this.multipleSeparator)} y ${remainingCount} más`
+    }
+  }
+
+  toggleDropdown() {
+    if (this.disabled || this.isLoading) return
+
+    this.isDropdownOpen = !this.isDropdownOpen
+    if (this.isDropdownOpen) {
+      this.onTouched()
+      this.updateDropdownPosition()
+    }
+  }
+
+  // ======================================================
+  // Utilidades
+  // ======================================================
+
+  getNestedValue(obj: any, path: string): any {
+    return path.split(".").reduce((acc, part) => acc && acc[part], obj) ?? ""
+  }
+
+  setupClickOutsideListener() {
+    this.clickOutsideListener = (event: MouseEvent) => {
+      const clickedElement = event.target as HTMLElement
+      const isOutsideDropdown = !this.elementRef.nativeElement.contains(clickedElement)
+      if (this.isDropdownOpen && isOutsideDropdown) {
+        this.isDropdownOpen = false
+        this.cdr.detectChanges()
+      }
+    }
+    document.addEventListener("click", this.clickOutsideListener)
+  }
+
+  updateDropdownPosition() {
+    setTimeout(() => {
+      if (!this.selectButton) return
+
+      const button = this.selectButton.nativeElement
+      const buttonRect = button.getBoundingClientRect()
+
+      // Posición básica
+      this.dropdownTop = buttonRect.bottom + window.scrollY
+      this.dropdownLeft = buttonRect.left + window.scrollX
+      this.dropdownWidth = buttonRect.width
+
+      this.cdr.detectChanges()
+
+      // Ajustar posición si es necesario
+      setTimeout(() => {
+        const dropdown = this.elementRef.nativeElement.querySelector(".absolute.z-\\[100\\]")
+        if (!dropdown) return
+
+        const dropdownRect = dropdown.getBoundingClientRect()
+        const viewportHeight = window.innerHeight
+        const viewportWidth = window.innerWidth
+
+        // Ajustar si se sale por abajo
+        if (buttonRect.bottom + dropdownRect.height > viewportHeight) {
+          this.dropdownTop = buttonRect.top + window.scrollY - dropdownRect.height
+        }
+
+        // Ajustar si se sale por la derecha
+        if (buttonRect.left + dropdownRect.width > viewportWidth) {
+          this.dropdownLeft = buttonRect.right + window.scrollX - dropdownRect.width
+        }
+
+        this.cdr.detectChanges()
+      }, 0)
+    })
+  }
+
+  // ======================================================
+  // ControlValueAccessor Implementation
+  // ======================================================
+
+  writeValue(value: any[]): void {
+    this.selectedValues = Array.isArray(value) ? value : []
+    this.updateDisplayLabel()
+    this.cdr.markForCheck()
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled
+    this.cdr.markForCheck()
+  }
+}

package/src/lib/components/select/multi-table/multi-table.component.html

@@ -0,0 +1,83 @@
+<div class="relative w-full h-full">
+    <!-- Botón para multi-table -->
+    <div #selectButton class="min-w-[40px]">
+        <JButton 
+            (clicked)="toggleColumnSelector()" 
+            classes="secondary" 
+            [icon]="btnIcon"
+            [disabled]="disabled">
+            {{btnText}}
+        </JButton>
+    </div>
+</div>
+
+<!-- Dropdown positioned outside the flow -->
+@if (isColumnSelectorOpen) {
+<div @modalTransition
+     class="absolute z-[100] min-w-[250px] max-w-[250px] mt-1 bg-background dark:bg-dark-background rounded-lg shadow-lg border border-border border-dark-border"
+     [style.width.px]="dropdownWidth"
+     [style.top.px]="dropdownTop" 
+     [style.left.px]="dropdownLeft">
+    <div class="pt-1 pl-3 pr-3 pb-3">
+        <div class="text-[10px] font-medium text-gray-500 dark:text-gray-500 mb-1">{{title}}</div>
+        
+        <!-- Multi-checkbox para columnas -->
+        <div class="max-h-60 overflow-auto flex flex-col gap-1 scroll-element">
+            @for (column of columns; track column.key) {
+            <div onKeyDown
+                 class="flex gap-5 items-center border border-accent dark:border-dark-accent/50 px-4 py-2 cursor-pointer group rounded-md transition-all hover:bg-accent dark:hover:bg-dark-accent/50"
+                 [ngClass]="{'bg-accent dark:bg-dark-accent/50' : column.visible}"
+                 (click)="toggleColumnVisibility(column)">
+                <!-- Checkbox oculto -->
+                <input type="checkbox" 
+                       [id]="'col-' + column.key" 
+                       [(ngModel)]="column.visible" 
+                       class="hidden">
+                
+                <!-- Ícono Check Visible Solo al Seleccionar -->
+                @if (column.visible) {
+                <lucide-icon [name]="icons.check" 
+                             size="15" 
+                             class="transition text-black dark:text-white" />
+                } @else {
+                <lucide-icon [name]="icons.squareDashedMousePointer" 
+                             size="15" 
+                             class="transition text-black dark:text-white opacity-40" />
+                }
+                
+                <!-- Etiqueta con Efectos de Hover e Iluminación -->
+                <label [for]="'col-' + column.key" 
+                       class="text-black dark:text-white text-sm font-medium w-full cursor-pointer">
+                    {{ column.label }}
+                </label>
+            </div>
+            }
+            
+            @if (columns.length === 0) {
+            <div class="px-3 py-2 text-sm text-gray-500">No hay columnas disponibles</div>
+            }
+        </div>
+        
+        <!-- Acciones adicionales -->
+        @if (showActions) {
+        <div class="mt-3 pt-2 border-t border-border dark:border-dark-border flex gap-2">
+            <button type="button"
+                    (click)="selectAllColumns()"
+                    class="px-3 py-1 text-xs bg-primary text-primary-foreground rounded hover:bg-primary/90 transition-colors">
+                Mostrar todas
+            </button>
+            <button type="button"
+                    (click)="deselectAllColumns()"
+                    class="px-3 py-1 text-xs bg-secondary text-secondary-foreground rounded hover:bg-secondary/90 transition-colors">
+                Ocultar todas
+            </button>
+            <button type="button"
+                    (click)="resetToDefault()"
+                    class="px-3 py-1 text-xs bg-outline text-foreground rounded hover:bg-accent transition-colors">
+                Restablecer
+            </button>
+        </div>
+        }
+    </div>
+</div>
+}