tailjng 0.0.13 → 0.0.15

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

@@ -0,0 +1,230 @@
+import { Component, Input, Output, EventEmitter, ElementRef, ViewChild, OnDestroy, ChangeDetectorRef, AfterViewInit, OnInit, SimpleChanges, OnChanges } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { CommonModule } from "@angular/common";
+import { Eye, LucideAngularModule, Check, SquareDashedMousePointer } from "lucide-angular";
+import { animate, style, transition, trigger } from "@angular/animations";
+import { JButtonComponent } from "../../button/button.component";
+import { TableColumn } from 'tailjng';
+
+@Component({
+  selector: "JMultiTableSelect",
+  imports: [LucideAngularModule, JButtonComponent, CommonModule, FormsModule],
+  templateUrl: "./multi-table.component.html",
+  styleUrls: ["./multi-table.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 }))]),
+    ]),
+  ],
+})
+export class JMultiTableSelectComponent implements AfterViewInit, OnInit, OnChanges, OnDestroy {
+  // Definición de iconos
+  icons = {
+    view: Eye,
+    check: Check,
+    squareDashedMousePointer: SquareDashedMousePointer,
+  };
+
+  @Input() btnIcon = this.icons.view; // Icono del botón
+  @Input() btnText = ""; // Texto del botón
+  @Input() title = "Columnas visibles"; // Título del dropdown
+  @Input() disabled = false; // Estado deshabilitado
+  @Input() showActions = true; // Mostrar botones de acción (mostrar todas, ocultar todas, etc.)
+
+  // Columnas de la tabla
+  @Input() columns: TableColumn<any>[] = []; // Usar 'any' para el tipo genérico
+
+  // Eventos
+  @Output() visibilityChange = new EventEmitter<TableColumn<any>[]>();
+  @Output() columnToggle = new EventEmitter<{ column: TableColumn<any>; visible: boolean }>();
+
+  @ViewChild("selectButton") selectButton!: ElementRef;
+
+  // Estado del componente
+  isColumnSelectorOpen = false;
+  private originalColumns: TableColumn<any>[] = []; // Para restablecer valores por defecto
+
+  // Posicionamiento del dropdown
+  dropdownTop = 0;
+  dropdownLeft = 0;
+  dropdownWidth = 0;
+
+  // Click fuera del componente
+  private clickOutsideListener: any;
+
+  constructor(private readonly cdr: ChangeDetectorRef, private readonly elementRef: ElementRef) {}
+
+  ngOnInit() {
+    // Guardar el estado original de las columnas
+    this.saveOriginalState();
+  }
+
+  ngAfterViewInit() {
+    this.setupClickOutsideListener();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes["columns"]) {
+      this.saveOriginalState();
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.clickOutsideListener) {
+      document.removeEventListener("click", this.clickOutsideListener);
+    }
+  }
+
+  // ======================================================
+  // Manejo de columnas
+  // ======================================================
+
+  toggleColumnVisibility(column: TableColumn<any>) {
+    // No permitir ocultar columnas si `hidden` es true
+    if (column.hidden) {
+      return;
+    }
+
+    column.visible = !column.visible;
+    this.emitChanges(column);
+  }
+
+  selectAllColumns() {
+    this.columns.forEach((column) => {
+      column.visible = true;
+    });
+    this.emitVisibilityChange();
+  }
+
+  deselectAllColumns() {
+    this.columns.forEach((column) => {
+      // No ocultar columnas que estén marcadas como `hidden`
+      if (!column.hidden) {
+        column.visible = false;
+      }
+    });
+    this.emitVisibilityChange();
+  }
+
+  resetToDefault() {
+    this.columns.forEach((column, index) => {
+      const original = this.originalColumns[index];
+      if (original) {
+        column.visible = original.visible ?? false; // Si `visible` es undefined, asignar false
+      }
+    });
+    this.emitVisibilityChange();
+  }
+
+  // ======================================================
+  // Métodos de utilidad
+  // ======================================================
+
+  private saveOriginalState() {
+    this.originalColumns = this.columns.map((col) => ({
+      ...col,
+      visible: col.visible ?? false, // Asegúrate de que `visible` siempre tenga un valor booleano
+    }));
+  }
+
+  private emitChanges(column: TableColumn<any>) {
+    this.columnToggle.emit({ column, visible: column.visible ?? false });
+    this.emitVisibilityChange();
+  }
+
+  private emitVisibilityChange() {
+    this.visibilityChange.emit([...this.columns]);
+  }
+
+  // ======================================================
+  // UI y posicionamiento
+  // ======================================================
+
+  toggleColumnSelector() {
+    if (this.disabled) return;
+
+    this.isColumnSelectorOpen = !this.isColumnSelectorOpen;
+    if (this.isColumnSelectorOpen) {
+      this.updateDropdownPosition();
+    }
+  }
+
+  setupClickOutsideListener() {
+    this.clickOutsideListener = (event: MouseEvent) => {
+      const clickedElement = event.target as HTMLElement;
+      const isOutsideDropdown = !this.elementRef.nativeElement.contains(clickedElement);
+      if (this.isColumnSelectorOpen && isOutsideDropdown) {
+        this.isColumnSelectorOpen = 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 = Math.max(buttonRect.width, 250); // Mínimo 250px
+
+      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);
+    });
+  }
+
+  // ======================================================
+  // Métodos públicos para uso externo
+  // ======================================================
+
+  getVisibleColumns(): TableColumn<any>[] {
+    return this.columns.filter((col) => col.visible);
+  }
+
+  getHiddenColumns(): TableColumn<any>[] {
+    return this.columns.filter((col) => !col.visible);
+  }
+
+  setColumnVisibility(key: string, visible: boolean) {
+    const column = this.columns.find((col) => col.key === key);
+    if (column && !column.hidden) {  // Solo cambiar visibilidad si no está oculto
+      column.visible = visible;
+      this.emitChanges(column);
+    }
+  }
+
+  getColumnVisibility(key: string): boolean {
+    const column = this.columns.find((col) => col.key === key);
+    return column?.visible ?? false;
+  }
+}

package/src/lib/components/toggle-radio/toggle-radio.component.html

@@ -0,0 +1,51 @@
+@if (internalOptions.length > 0) {
+    <div class="flex rounded-md overflow-hidden border border-border dark:border-dark-border text-sm min-h-[40px] select-none" [ngClass]="{ 'opacity-50': disabled || isComponentDisabled }" [class]="classes">
+        
+    <ng-container>
+            @for (opt of internalOptions; track $index) {
+                <button
+                type="button"
+                [disabled]="disabled || isComponentDisabled"
+                (click)="select(opt.value)"
+                [ngClass]="{
+                    'bg-primary dark:bg-dark-primary text-white': selectedValue === opt.value,
+                    'bg-background dark:bg-dark-background hover:bg-muted/80 hover:dark:bg-dark-muted/30 text-gray-700 dark:text-white': selectedValue !== opt.value,
+                    'cursor-not-allowed pointer-events-none': disabled || isComponentDisabled
+                }"
+                class="w-full py-2 px-4 font-medium border-r border-border last:border-none focus:outline-none transition-colors duration-200 ease-in-out cursor-pointer"
+                [class]="classesElement"
+                >
+                {{ opt.label }}
+                </button>
+            }
+        </ng-container>
+
+    </div>
+} @else if (isLoading) {
+
+    <div class="flex text-black dark:text-white gap-2 items-center justify-center rounded-md overflow-hidden border border-border dark:border-dark-border h-[40px]">
+        <lucide-icon [name]="iconsService.icons.loading" [size]="15" class="text-gray-400 animate-spin" />
+        <span>Cargando...</span>
+    </div>  
+
+} @else {
+
+    <div class="flex text-black dark:text-white items-center justify-center rounded-md overflow-hidden border border-border dark:border-dark-border h-[40px]">
+        No hay opciones
+    </div>  
+
+}
+  
+<!-- Clear button -->
+@if (showClear && selectedValue !== null) {
+    <div class="mt-2">
+        <button 
+        type="button" 
+        (click)="clear()" 
+        [disabled]="disabled || isComponentDisabled"
+        class="text-xs text-red-500 underline disabled:opacity-50 disabled:cursor-not-allowed">
+        Limpiar selección
+        </button>
+    </div>
+}
+  

package/src/lib/components/toggle-radio/toggle-radio.component.ts

@@ -0,0 +1,203 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { LucideAngularModule } from 'lucide-angular';
+import { JIconsService, JGenericCrudService } from 'tailjng';
+
+@Component({
+  selector: 'JToggleRadio',
+  imports: [LucideAngularModule, CommonModule],
+  templateUrl: './toggle-radio.component.html',
+  styleUrl: './toggle-radio.component.css',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => JToggleRadioComponent),
+      multi: true,
+    },
+  ],
+})
+export class JToggleRadioComponent implements OnInit, ControlValueAccessor {
+
+  @Input() endpoint: string = '';
+
+  @Input() options: any[] = [];
+  @Input() optionLabel = 'label';
+  @Input() optionValue = 'value';
+
+  @Input() sort: 'ASC' | 'DESC' = 'ASC';
+  @Input() defaultFilters: { [key: string]: any } = {};
+
+  @Input() loadOnInit = false;
+  @Input() selectFirstOnLoad: boolean = false;
+
+  @Input() disabled: boolean = false;
+  @Input() showClear = false;
+
+  @Input() classes: string = '';
+  @Input() classesElement: string = '';
+
+  @Output() selectionChange = new EventEmitter<any>();
+
+  internalOptions: { value: any; label: string }[] = [];
+  selectedValue: any = null;
+  isLoading = false;
+
+  isComponentDisabled = false;
+
+  // ControlValueAccessor
+  onChange: any = () => { };
+  onTouched: any = () => { };
+
+  constructor(
+    public readonly iconsService: JIconsService,
+    private readonly genericService: JGenericCrudService
+  ) { }
+
+  ngOnInit(): void {
+    if (this.endpoint && this.loadOnInit) {
+      this.loadOptionsFromApi();
+    } else {
+      this.processOptions();
+    }
+  }
+
+
+  /**
+   * Set the disabled state of the component.
+   * This method is part of the ControlValueAccessor interface.
+   * @param isDisabled 
+   */
+  setDisabledState(isDisabled: boolean): void {
+    this.isComponentDisabled = isDisabled;
+  }
+
+
+  /**
+   * Load options from the API based on the endpoint and default filters.
+   * This method fetches data from the API and processes it to set the internal options.
+   */
+  loadOptionsFromApi() {
+    this.isLoading = true;
+
+    const params: any = {};
+    params['sortOrder'] = this.sort;
+
+    Object.keys(this.defaultFilters).forEach((key) => {
+      params[`filter[${key}]`] = this.defaultFilters[key];
+    });
+
+    this.genericService.getAll<any>(this.endpoint, params).subscribe({
+      next: (res) => {
+        const data = res.data[this.endpoint] || [];
+        this.options = data;
+        this.processOptions();
+        this.isLoading = false;
+
+        // If selectFirstOnLoad is true, select the first element
+        if (this.selectFirstOnLoad && this.internalOptions.length > 0) {
+          this.selectedValue = this.internalOptions[0].value;
+          this.onChange(this.selectedValue);
+          this.selectionChange.emit(this.selectedValue);
+        }
+      },
+      error: () => (this.isLoading = false),
+    });
+  }
+
+
+  /**
+   * Get a nested value from an object using a dot-separated path.
+   * @param obj The object to search.
+   * @param path The dot-separated path to the desired value.
+   * @returns The value found at the specified path, or an empty string if not found.
+   */
+  getNestedValue(obj: any, path: string): any {
+    return path.split('.').reduce((acc, part) => acc && acc[part], obj) ?? '';
+  }
+
+
+  /**
+   * Process the options to extract value and label.
+   * This method checks if the options are objects and extracts the specified value and label.
+   */
+  processOptions() {
+    if (this.options.length > 0 && typeof this.options[0] === 'object') {
+
+      this.internalOptions = this.options.map((opt) => ({
+        value: opt[this.optionValue],
+        label: this.getNestedValue(opt, this.optionLabel),
+      }));
+
+    } else {
+      this.internalOptions = this.options.map((opt) => ({
+        value: opt,
+        label: opt.toString(),
+      }));
+    }
+  }
+
+
+  /**
+   * Select an option.
+   * @param value The value of the option to select.
+   * @returns 
+   */
+  select(value: any) {
+    if (this.disabled || this.isComponentDisabled) return;
+    this.selectedValue = value;
+    this.onChange(this.selectedValue);
+    this.selectionChange.emit(this.selectedValue);
+  }
+
+
+  /**
+   * Clear the selected value.
+   */
+  clear() {
+    this.selectedValue = null;
+    this.onChange(null);
+    this.selectionChange.emit(null);
+  }
+
+
+  /**
+   * Write the value to the component.
+   * This method is part of the ControlValueAccessor interface.
+   * It updates the selected value and notifies the change.
+   * @param value The value to write.
+   */
+  writeValue(value: any): void {
+    this.selectedValue = value;
+  }
+
+
+  /**
+   * Register a callback function to be called when the value changes.
+   * This method is part of the ControlValueAccessor interface.
+   * @param fn 
+   */
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+
+  /**
+   * Register a callback function to be called when the control is touched.
+   * This method is part of the ControlValueAccessor interface.
+   * @param fn The callback function to register.
+   */
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+
+  /**
+   * Reload the options based on the current filters.
+   * This method can be called to refresh the options displayed in the toggle radio component.
+   */
+  reloadOptions() {
+    this.loadOptionsFromApi();  // Reload options with the new filters
+  }
+
+}

package/src/styles.css

@@ -0,0 +1,126 @@
+/* Scrolls */
+
+.scroll-element {
+  padding-right: 5px
+}
+
+.scroll-element::-webkit-scrollbar {
+  width: 5px;
+  height: 5px
+}
+
+.scroll-element::-webkit-scrollbar-track {
+  border-radius: 10px
+}
+
+.scroll-element::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: var(--color-primary);
+  -webkit-transition: .5s;
+  transition: .5s
+}
+
+.scroll-element::-webkit-scrollbar-thumb:hover {
+  background: var(--color-dark-primary)
+}
+
+.scroll-element::-webkit-scrollbar-button {
+  width: 0px;
+  height: 0px
+}
+
+.scroll-screen {
+  padding-right: 5px
+}
+
+.scroll-screen::-webkit-scrollbar {
+  width: 10px;
+  height: 10px
+}
+
+.scroll-screen::-webkit-scrollbar-thumb {
+  background: var(--color-dark-primary);
+  border: 3px solid var(--color-primary);
+  -webkit-transition: .5s;
+  transition: .5s
+}
+
+.scroll-screen::-webkit-scrollbar-thumb:hover {
+  background: var(--color-primary)
+}
+
+.scroll-screen::-webkit-scrollbar-button {
+  width: 0px;
+  height: 0px
+}
+
+.dark .scroll-screen::-webkit-scrollbar-thumb {
+  background: var(--color-dark-primary);
+  border: 3px solid var(--color-primary);
+  -webkit-transition: .5s;
+  transition: .5s
+}
+
+.dark .scroll-screen::-webkit-scrollbar-thumb:hover {
+  background: var(--color-primary)
+}
+
+
+
+
+/* Inputs */
+
+.input::placeholder {
+  color: rgba(0, 0, 0, 0.5) !important;
+}
+
+.input:-webkit-autofill {
+  -webkit-text-fill-color: black !important;
+  -webkit-box-shadow: 0 0 0px 1000px color-mix(in srgb, var(--color-primary) 15%, white) inset !important;
+  caret-color: var(--color-primary) !important
+}
+
+.input:-webkit-autofill:hover,
+.input:-webkit-autofill:focus,
+.input:-webkit-autofill:active {
+  -webkit-text-fill-color: black !important;
+  -webkit-box-shadow: 0 0 0px 1000px color-mix(in srgb, var(--color-primary) 15%, white) inset !important;
+  caret-color: var(--color-primary) !important
+}
+
+.input[type=date]::-webkit-calendar-picker-indicator,
+.input[type=datetime-local]::-webkit-calendar-picker-indicator {
+  filter: none !important;
+  opacity: 1 !important;
+  color: #000 !important;
+  background-color: transparent !important;
+  -webkit-filter: brightness(0) invert(0) !important
+}
+
+
+.dark .input::placeholder {
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+
+.dark .input:-webkit-autofill {
+  -webkit-text-fill-color: white !important;
+  -webkit-box-shadow: 0 0 0px 1000px color-mix(in srgb, var(--color-background) 15%, black) inset !important;
+  caret-color: var(--color-dark-primary) !important
+}
+
+.dark .input .input:-webkit-autofill:hover,
+.dark .input .input:-webkit-autofill:focus,
+.dark .input .input:-webkit-autofill:active {
+  -webkit-text-fill-color: white !important;
+  -webkit-box-shadow: 0 0 0px 1000px color-mix(in srgb, var(--color-background) 15%, black) inset !important;
+  caret-color: var(--color-primary) !important
+}
+
+.dark .input[type=date]::-webkit-calendar-picker-indicator,
+.dark .input[type=datetime-local]::-webkit-calendar-picker-indicator {
+  filter: none !important;
+  opacity: 1 !important;
+  color: #fff !important;
+  background-color: transparent !important;
+  -webkit-filter: brightness(0) invert(1) !important
+}