tailjng 0.1.6 → 0.1.7

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'

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

@@ -0,0 +1,7 @@
+import type { LoadingState } from 'tailjng';
+
+/** Event payload from `(clearFilters)` — typically `'clear'`. */
+export type CompleteFilterClearReason = string;
+
+/** Loading map keyed by {@link FilterButton.type} (e.g. `excel`, `upload`). */
+export type CompleteFilterAdditionalButtonLoading = Record<string, LoadingState>;

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

@@ -0,0 +1,16 @@
+import type { FilterSelect } from 'tailjng';
+
+/** Whether search text or any filter select differs from its initial value. */
+export function hasActiveFilters(
+  searchQuery: string,
+  filtersSelect: FilterSelect[],
+): boolean {
+  const hasActiveSearch = searchQuery?.trim().length > 0;
+  const hasSelectedFilters = filtersSelect.some((filter) => {
+    const actual = filter.selected;
+    const initial = filter.initSelected ?? null;
+    return JSON.stringify(actual) !== JSON.stringify(initial);
+  });
+
+  return hasActiveSearch || hasSelectedFilters;
+}

package/src/lib/components/form/form-container/container-form.component.css

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  width: 100%;
+}

package/src/lib/components/form/form-container/container-form.component.html

@@ -1,3 +1,3 @@
-<div [ngClass]="getClasses()">
-    <ng-content></ng-content>
+<div [ngClass]="containerClasses()">
+  <ng-content></ng-content>
 </div>

package/src/lib/components/form/form-container/container-form.component.ts

@@ -1,33 +1,89 @@
 import { NgClass } from '@angular/common';
 import { Component, Input } from '@angular/core';
+import {
+  FORM_CONTAINER_COLUMN_CLASSES,
+  FORM_CONTAINER_GAP_CLASSES,
+  FORM_CONTAINER_ROWS_ALIGN_CLASSES,
+  FormContainerColumns,
+  FormContainerGap,
+  FormContainerRowsAlign,
+} from './container-form.types';
 
+export type {
+  FormContainerColSpan,
+  FormContainerColumns,
+  FormContainerGap,
+  FormContainerRowsAlign,
+} from './container-form.types';
+
+/**
+ * Grid/flex layout wrapper for form fields.
+ *
+ * Install: `npx tailjng add form-container`
+ *
+ * @example
+ * ```html
+ * <JFormContainer [columns]="2" [gap]="4">
+ *   <div jFormColSpan="1">...</div>
+ *   <div jFormColSpan="full">...</div>
+ * </JFormContainer>
+ * ```
+ */
 @Component({
   selector: 'JFormContainer',
+  standalone: true,
   imports: [NgClass],
   templateUrl: './container-form.component.html',
-  styleUrl: './container-form.component.css'
+  styleUrl: './container-form.component.css',
 })
 export class JFormContainerComponent {
+  /** Grid columns when `rows` is false. Values outside 1–6 fall back to 1. */
+  @Input() columns: FormContainerColumns = 1;
+
+  /** Horizontal row layout instead of grid. */
+  @Input() rows = false;
+
+  /** Grid/flex gap utility (`gap-1` … `gap-8`). Default `2`. */
+  @Input() gap: FormContainerGap = 2;
+
+  /** Cross-axis alignment when `rows` is true. */
+  @Input() rowsAlign: FormContainerRowsAlign = 'center';
 
-  @Input() columns = 1
-  @Input() rows = false
+  /** Allow wrapped rows in `rows` mode. */
+  @Input() rowsWrap = false;
 
-  getClasses(): string {
-    if (this.rows) return "flex flex-row gap-3 items-center"
+  containerClasses(): Record<string, boolean> {
+    const gapClass = FORM_CONTAINER_GAP_CLASSES[this.gap] ?? FORM_CONTAINER_GAP_CLASSES[2];
 
-    const base = "grid gap-2"
-    const columnClassMap: { [key: number]: string } = {
-      1: "grid-cols-1",
-      2: "grid-cols-2",
-      3: "grid-cols-3",
-      4: "grid-cols-4",
-      5: "grid-cols-5",
-      6: "grid-cols-6",
+    if (this.rows) {
+      const alignClass =
+        FORM_CONTAINER_ROWS_ALIGN_CLASSES[this.rowsAlign] ??
+        FORM_CONTAINER_ROWS_ALIGN_CLASSES.center;
+
+      return {
+        flex: true,
+        'flex-row': true,
+        [gapClass]: true,
+        [alignClass]: true,
+        'flex-wrap': this.rowsWrap,
+      };
     }
 
-    const mainClass = `${base} ${columnClassMap[this.columns] || columnClassMap[1]}`
+    const columns = this.normalizeColumns(this.columns);
+    const columnClass = FORM_CONTAINER_COLUMN_CLASSES[columns];
 
-    return `${mainClass}`.trim()
+    return {
+      grid: true,
+      [gapClass]: true,
+      [columnClass]: true,
+    };
   }
 
-}
+  private normalizeColumns(columns: number): FormContainerColumns {
+    if (columns >= 1 && columns <= 6) {
+      return columns as FormContainerColumns;
+    }
+
+    return 1;
+  }
+}

package/src/lib/components/form/form-container/container-form.types.ts

@@ -0,0 +1,42 @@
+export type FormContainerColumns = 1 | 2 | 3 | 4 | 5 | 6;
+
+export type FormContainerGap = 1 | 2 | 3 | 4 | 6 | 8;
+
+export type FormContainerColSpan = FormContainerColumns | 'full';
+
+export type FormContainerRowsAlign = 'start' | 'center' | 'end' | 'stretch';
+
+export const FORM_CONTAINER_COLUMN_CLASSES: Record<FormContainerColumns, string> = {
+  1: 'grid-cols-1',
+  2: 'grid-cols-2',
+  3: 'grid-cols-3',
+  4: 'grid-cols-4',
+  5: 'grid-cols-5',
+  6: 'grid-cols-6',
+};
+
+export const FORM_CONTAINER_GAP_CLASSES: Record<FormContainerGap, string> = {
+  1: 'gap-1',
+  2: 'gap-2',
+  3: 'gap-3',
+  4: 'gap-4',
+  6: 'gap-6',
+  8: 'gap-8',
+};
+
+export const FORM_CONTAINER_COL_SPAN_CLASSES: Record<FormContainerColSpan, string> = {
+  1: 'col-span-1',
+  2: 'col-span-2',
+  3: 'col-span-3',
+  4: 'col-span-4',
+  5: 'col-span-5',
+  6: 'col-span-6',
+  full: 'col-span-full',
+};
+
+export const FORM_CONTAINER_ROWS_ALIGN_CLASSES: Record<FormContainerRowsAlign, string> = {
+  start: 'items-start',
+  center: 'items-center',
+  end: 'items-end',
+  stretch: 'items-stretch',
+};

package/src/lib/components/form/form-container/form-col-span.directive.ts

@@ -0,0 +1,25 @@
+import { Directive, Input } from '@angular/core';
+import {
+  FORM_CONTAINER_COL_SPAN_CLASSES,
+  FormContainerColSpan,
+} from './container-form.types';
+
+/**
+ * Sets Tailwind `col-span-*` on a projected field inside `JFormContainer`.
+ * Import this directive in the consumer component that renders the fields.
+ */
+@Directive({
+  selector: '[jFormColSpan]',
+  standalone: true,
+  host: {
+    '[class]': 'colSpanClass',
+  },
+})
+export class JFormColSpanDirective {
+  @Input({ alias: 'jFormColSpan', required: true })
+  colSpan: FormContainerColSpan = 1;
+
+  get colSpanClass(): string {
+    return FORM_CONTAINER_COL_SPAN_CLASSES[this.colSpan] ?? FORM_CONTAINER_COL_SPAN_CLASSES[1];
+  }
+}

package/src/lib/components/form/form-sidebar/sidebar-form.component.css

@@ -0,0 +1,276 @@
+:host {
+  display: contents;
+}
+
+.j-form-sidebar-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 998;
+  background-color: rgb(0 0 0 / 0.5);
+  backdrop-filter: blur(1px);
+  animation: j-form-sidebar-overlay-in 300ms ease-out;
+}
+
+@keyframes j-form-sidebar-overlay-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.j-form-sidebar {
+  position: fixed;
+  top: 0;
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  background-color: var(--color-background);
+}
+
+.j-form-sidebar--right {
+  right: 0;
+  border-right: 0;
+  border-radius: 0.75rem 0 0 0.75rem;
+  box-shadow: -8px 0 32px rgb(0 0 0 / 0.12);
+}
+
+.j-form-sidebar--left {
+  left: 0;
+  border-left: 0;
+  border-radius: 0 0.75rem 0.75rem 0;
+  box-shadow: 8px 0 32px rgb(0 0 0 / 0.12);
+}
+
+:host-context(.dark) .j-form-sidebar,
+:host-context(html.dark) .j-form-sidebar {
+  border-color: var(--color-dark-border);
+  background-color: var(--color-dark-background);
+}
+
+:host-context(.dark) .j-form-sidebar--right,
+:host-context(html.dark) .j-form-sidebar--right {
+  box-shadow: -8px 0 32px rgb(0 0 0 / 0.35);
+}
+
+:host-context(.dark) .j-form-sidebar--left,
+:host-context(html.dark) .j-form-sidebar--left {
+  box-shadow: 8px 0 32px rgb(0 0 0 / 0.35);
+}
+
+.j-form-sidebar--small {
+  width: 22em;
+}
+
+.j-form-sidebar--medium {
+  width: 30em;
+}
+
+.j-form-sidebar--large {
+  width: 47em;
+}
+
+.j-form-sidebar--xlarge {
+  width: 65em;
+}
+
+.j-form-sidebar-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-height: 3.25rem;
+  padding: 0.625rem 0.75rem 0.625rem 1rem;
+  border-bottom: 1px solid var(--color-border);
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--color-muted) 28%, var(--color-background)) 0%,
+    var(--color-background) 100%
+  );
+  flex-shrink: 0;
+}
+
+:host-context(.dark) .j-form-sidebar-header,
+:host-context(html.dark) .j-form-sidebar-header {
+  border-bottom-color: var(--color-dark-border);
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--color-dark-muted) 35%, var(--color-dark-background)) 0%,
+    var(--color-dark-background) 100%
+  );
+}
+
+.j-form-sidebar-title-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.j-form-sidebar-title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: -0.015em;
+  color: var(--color-foreground);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:host-context(.dark) .j-form-sidebar-title,
+:host-context(html.dark) .j-form-sidebar-title {
+  color: var(--color-dark-foreground);
+}
+
+.j-form-sidebar-info {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  flex: 0 0 1.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--color-muted-foreground);
+  cursor: pointer;
+  transition:
+    color 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.j-form-sidebar-info:hover {
+  color: var(--color-foreground);
+  background-color: color-mix(in srgb, var(--color-muted) 55%, transparent);
+}
+
+.j-form-sidebar-info:focus-visible {
+  outline: 2px solid var(--color-ring);
+  outline-offset: 2px;
+}
+
+:host-context(.dark) .j-form-sidebar-info,
+:host-context(html.dark) .j-form-sidebar-info {
+  color: var(--color-dark-muted-foreground);
+}
+
+:host-context(.dark) .j-form-sidebar-info:hover,
+:host-context(html.dark) .j-form-sidebar-info:hover {
+  color: var(--color-dark-foreground);
+  background-color: color-mix(in srgb, var(--color-dark-muted) 50%, transparent);
+}
+
+.j-form-sidebar-header-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.j-form-sidebar-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  flex: 0 0 2rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0.375rem;
+  background-color: transparent;
+  color: var(--color-muted-foreground);
+  line-height: 0;
+  cursor: pointer;
+  transition:
+    color 0.15s ease,
+    background-color 0.15s ease,
+    transform 0.15s ease;
+}
+
+.j-form-sidebar-close:hover {
+  color: var(--color-foreground);
+  background-color: color-mix(in srgb, var(--color-muted) 55%, transparent);
+}
+
+.j-form-sidebar-close:active {
+  transform: scale(0.94);
+}
+
+.j-form-sidebar-close:focus-visible {
+  outline: 2px solid var(--color-ring);
+  outline-offset: 2px;
+}
+
+:host-context(.dark) .j-form-sidebar-close,
+:host-context(html.dark) .j-form-sidebar-close {
+  color: var(--color-dark-muted-foreground);
+}
+
+:host-context(.dark) .j-form-sidebar-close:hover,
+:host-context(html.dark) .j-form-sidebar-close:hover {
+  color: var(--color-dark-foreground);
+  background-color: color-mix(in srgb, var(--color-dark-muted) 50%, transparent);
+}
+
+.j-form-sidebar-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 1rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+  color: var(--color-foreground);
+}
+
+:host-context(.dark) .j-form-sidebar-body,
+:host-context(html.dark) .j-form-sidebar-body {
+  color: var(--color-dark-foreground);
+}
+
+.j-form-sidebar-footer {
+  display: flex;
+  justify-content: center;
+  gap: 0.75rem;
+  flex-shrink: 0;
+  padding: 1rem;
+  border-top: 1px solid var(--color-border);
+  background-color: color-mix(in srgb, var(--color-muted) 18%, var(--color-background));
+}
+
+:host-context(.dark) .j-form-sidebar-footer,
+:host-context(html.dark) .j-form-sidebar-footer {
+  border-top-color: var(--color-dark-border);
+  background-color: color-mix(in srgb, var(--color-dark-muted) 22%, var(--color-dark-background));
+}
+
+.j-form-sidebar-coach {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+}
+
+@media (max-width: 767px) {
+  .j-form-sidebar {
+    width: 100% !important;
+    max-width: 100%;
+    border-radius: 0;
+  }
+
+  .j-form-sidebar--right {
+    border-left: 0;
+  }
+
+  .j-form-sidebar--left {
+    border-right: 0;
+  }
+}