tailjng 0.1.6 → 0.1.7

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

@@ -0,0 +1,10 @@
+import type { TableColumn } from 'tailjng';
+
+/** Payload emitted when one column visibility is toggled. */
+export type MultiTableSelectColumnToggleEvent<T = unknown> = {
+  column: TableColumn<T>;
+  visible: boolean;
+};
+
+/** Extra Tailwind classes applied to the trigger button. */
+export type MultiTableSelectNgClasses = Record<string, boolean>;

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

@@ -0,0 +1,5 @@
+export {
+  DROPDOWN_PANEL_DEFAULTS,
+  positionDropdownPanel,
+  resetDropdownPanelStyles,
+} from '../select-dropdown/dropdown-select.util';

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

@@ -0,0 +1,212 @@
+:host {
+  display: contents;
+}
+
+.j-sidebar-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 998;
+  background-color: rgb(0 0 0 / 0.5);
+  backdrop-filter: blur(1px);
+  animation: j-sidebar-overlay-in 300ms ease-out;
+}
+
+@keyframes j-sidebar-overlay-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.j-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-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-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-sidebar,
+:host-context(html.dark) .j-sidebar {
+  border-color: var(--color-dark-border);
+  background-color: var(--color-dark-background);
+}
+
+:host-context(.dark) .j-sidebar--right,
+:host-context(html.dark) .j-sidebar--right {
+  box-shadow: -8px 0 32px rgb(0 0 0 / 0.35);
+}
+
+:host-context(.dark) .j-sidebar--left,
+:host-context(html.dark) .j-sidebar--left {
+  box-shadow: 8px 0 32px rgb(0 0 0 / 0.35);
+}
+
+.j-sidebar--small {
+  width: 22em;
+}
+
+.j-sidebar--medium {
+  width: 30em;
+}
+
+.j-sidebar--large {
+  width: 47em;
+}
+
+.j-sidebar--xlarge {
+  width: 65em;
+}
+
+.j-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-sidebar-header,
+:host-context(html.dark) .j-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-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;
+}
+
+.j-sidebar-title--placeholder {
+  min-height: 1.25rem;
+}
+
+:host-context(.dark) .j-sidebar-title,
+:host-context(html.dark) .j-sidebar-title {
+  color: var(--color-dark-foreground);
+}
+
+.j-sidebar-header-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.j-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-sidebar-close:hover {
+  color: var(--color-foreground);
+  background-color: color-mix(in srgb, var(--color-muted) 55%, transparent);
+}
+
+.j-sidebar-close:active {
+  transform: scale(0.94);
+}
+
+.j-sidebar-close:focus-visible {
+  outline: 2px solid var(--color-ring);
+  outline-offset: 2px;
+}
+
+:host-context(.dark) .j-sidebar-close,
+:host-context(html.dark) .j-sidebar-close {
+  color: var(--color-dark-muted-foreground);
+}
+
+:host-context(.dark) .j-sidebar-close:hover,
+:host-context(html.dark) .j-sidebar-close:hover {
+  color: var(--color-dark-foreground);
+  background-color: color-mix(in srgb, var(--color-dark-muted) 50%, transparent);
+}
+
+.j-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-sidebar-body,
+:host-context(html.dark) .j-sidebar-body {
+  color: var(--color-dark-foreground);
+}
+
+@media (max-width: 767px) {
+  .j-sidebar {
+    width: 100% !important;
+    max-width: 100%;
+    border-radius: 0;
+  }
+
+  .j-sidebar--right {
+    border-left: 0;
+  }
+
+  .j-sidebar--left {
+    border-right: 0;
+  }
+}

package/src/lib/components/sidebar/sidebar-static/static-sidebar.component.html

@@ -1,60 +1,69 @@
-<section class="content_form">
+@if (openSidebar) {
+  <div
+    class="j-sidebar-overlay"
+    aria-hidden="true"
+    (click)="onOverlayClick()"
+  ></div>
+}
 
-    <!-- Overlay -->
-    @if (openSidebar) {
-        <div onKeyPress class="fixed top-0 left-0 w-full h-full bg-black/50 z-[998] transition duration-300" (click)="canCloseOverlay ? onClose() : null"></div>
+<ng-template #sidebarContent>
+  <header class="j-sidebar-header">
+    @if (titleForm) {
+      <h2 class="j-sidebar-title">{{ titleForm }}</h2>
+    } @else {
+      <span class="j-sidebar-title j-sidebar-title--placeholder"></span>
     }
 
-    <!-- Sidebar personalizado -->
-    @if (openSidebar) {
-        <div @sidebarTransition
-            class="fixed top-0 right-0 h-full max-w-full border border-border dark:border-dark-border rounded-tl-[15px] rounded-bl-[15px] text-white shadow-lg z-[999] flex flex-col"
-            [style]="style"
-            [ngClass]="bgColor"
-            [class.w-[22em]]="size==='small'"
-            [class.w-[30em]]="size==='medium'"
-            [class.w-[47em]]="size==='large'"
-            [class.w-[65em]]="size==='xlarge'"
-        >
-            <!-- Header -->
-            @if (titleForm) {
-                <div class="flex p-2 pl-4 pr-4 justify-between items-center bg-primary dark:bg-dark-primary border-b border-border dark:border-dark-border rounded-tl-[15px] font-semibold text-2sm">
-                        <div class="flex items-center gap-2">
-                            <span>
-                                {{ titleForm }}
-                            </span>
-                        </div>
-                    
-
-
-                    <div class="flex gap-2">
-                        @for (cb of checkboxes; track $index) {
-                            @if (cb.isVisible) {
-                                <JSwitchCheckbox onKeyPress
-                                    [title]="cb.title"
-                                    [isChecked]="cb.isChecked"
-                                    [isLoading]="cb.isLoading"
-                                    (click)="cb.onClick(!cb.isChecked, $index)"
-                                />
-                            }
-                        }
-                    </div>
-
-                    <button type="button" (click)="onClose()" class="p-2 rounded-full border border-border dark:border-dark-border text-white hover:bg-dark-background focus:outline-none cursor-pointer">
-                        <lucide-icon [name]="iconsService.icons.close" size="16"></lucide-icon>
-                    </button>
-                </div>
-            }
-
-
-            <!-- Content -->
-            <div class="p-4 flex-1 overflow-x-hidden overflow-y-auto scroll-element">
-                @if (sidebarTemplate) {
-                    <ng-container [ngTemplateOutlet]="sidebarTemplate"></ng-container>
-                }
-            </div>
+    <div class="j-sidebar-header-actions">
+      @for (cb of visibleCheckboxes; track $index) {
+        <JSwitchCheckbox
+          [title]="cb.title"
+          [isChecked]="cb.isChecked"
+          [isLoading]="cb.isLoading"
+          (click)="cb.onClick(!cb.isChecked, $index)"
+        />
+      }
 
+      <button
+        type="button"
+        class="j-sidebar-close"
+        aria-label="Cerrar"
+        (click)="onClose()"
+      >
+        <JIcon [icon]="Icons.X" [size]="18" [inheritParentColor]="true" [ariaHidden]="true" />
+      </button>
     </div>
+  </header>
+
+  <div class="j-sidebar-body scroll-element">
+    @if (sidebarTemplate) {
+      <ng-container [ngTemplateOutlet]="sidebarTemplate" />
     }
+  </div>
+</ng-template>
+
+@if (openSidebar && position === 'left') {
+  <aside
+    @sidebarTransitionLeft
+    role="dialog"
+    [attr.aria-modal]="true"
+    [attr.aria-label]="titleForm || 'Panel lateral'"
+    [ngClass]="panelClasses"
+    [ngStyle]="style"
+  >
+    <ng-container [ngTemplateOutlet]="sidebarContent" />
+  </aside>
+}
 
-</section>
+@if (openSidebar && position === 'right') {
+  <aside
+    @sidebarTransitionRight
+    role="dialog"
+    [attr.aria-modal]="true"
+    [attr.aria-label]="titleForm || 'Panel lateral'"
+    [ngClass]="panelClasses"
+    [ngStyle]="style"
+  >
+    <ng-container [ngTemplateOutlet]="sidebarContent" />
+  </aside>
+}

package/src/lib/components/sidebar/sidebar-static/static-sidebar.component.ts

@@ -1,53 +1,110 @@
-import { CommonModule } from '@angular/common';
-import { Component, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, HostListener, Input, Output, TemplateRef } from '@angular/core';
-import { animate, style, transition, trigger } from '@angular/animations';
-import { LucideAngularModule } from 'lucide-angular';
-import { DynamicCheckbox, JIconsService } from 'tailjng';
+import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
+import {
+  Component,
+  EventEmitter,
+  HostListener,
+  Input,
+  Output,
+  TemplateRef,
+} from '@angular/core';
+import { trigger, transition, style, animate } from '@angular/animations';
+import { DynamicCheckbox } from 'tailjng';
+import { Icons } from '../../.config/icons/icons.lucide';
 import { JSwitchCheckboxComponent } from '../../checkbox/checkbox-switch/switch-checkbox.component';
+import { JIconComponent } from '../../icon/icon.component';
+import { StaticSidebarPosition, StaticSidebarSize } from './static-sidebar.types';
 
+export type { StaticSidebarPosition, StaticSidebarSize } from './static-sidebar.types';
+
+/**
+ * Static side panel with overlay, header actions, and template content.
+ *
+ * Install: `npx tailjng add sidebar-static`
+ */
 @Component({
   selector: 'JStaticSidebar',
-  standalone: true,
-  imports: [LucideAngularModule, CommonModule, JSwitchCheckboxComponent],
+  imports: [NgClass, NgStyle, NgTemplateOutlet, JSwitchCheckboxComponent, JIconComponent],
   templateUrl: './static-sidebar.component.html',
-  styleUrl: './static-sidebar.component.scss',
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  styleUrl: './static-sidebar.component.css',
   animations: [
-    trigger('sidebarTransition', [
+    trigger('sidebarTransitionRight', [
       transition(':enter', [
         style({ opacity: 0, transform: 'translateX(100%)' }),
-        animate('300ms ease-out', style({ opacity: 1, transform: 'translateX(0)' }))
+        animate('300ms ease-out', style({ opacity: 1, transform: 'translateX(0)' })),
       ]),
       transition(':leave', [
-        animate('200ms ease-in', style({ opacity: 0, transform: 'translateX(100%)' }))
-      ])
-    ])
-  ]
+        animate('200ms ease-in', style({ opacity: 0, transform: 'translateX(100%)' })),
+      ]),
+    ]),
+    trigger('sidebarTransitionLeft', [
+      transition(':enter', [
+        style({ opacity: 0, transform: 'translateX(-100%)' }),
+        animate('300ms ease-out', style({ opacity: 1, transform: 'translateX(0)' })),
+      ]),
+      transition(':leave', [
+        animate('200ms ease-in', style({ opacity: 0, transform: 'translateX(-100%)' })),
+      ]),
+    ]),
+  ],
 })
 export class JStaticSidebarComponent {
+  readonly Icons = Icons;
 
-  @Input() openSidebar: boolean = false;
+  @Input() openSidebar = false;
   @Output() closeSidebar = new EventEmitter<void>();
 
-  @Input() sidebarTemplate!: TemplateRef<any>;
+  @Input() sidebarTemplate!: TemplateRef<unknown>;
   @Input() titleForm: string | null = null;
 
   @Input() checkboxes: DynamicCheckbox[] = [];
-  @Input() size: 'small' | 'medium' | 'large' | 'xlarge' = 'medium';
-  @Input() bgColor: string = 'bg-white dark:bg-foreground';
-  @Input() style: { [key: string]: any } = {};
-  @Input() isLoading: boolean = false;
-  @Input() canCloseOverlay: boolean = true;
+  @Input() size: StaticSidebarSize = 'medium';
+  /** Panel edge to slide in from. Defaults to right for backward compatibility. */
+  @Input() position: StaticSidebarPosition = 'right';
+  /** @deprecated Prefer theme defaults — extra Tailwind classes on the panel shell. */
+  @Input() bgColor = '';
+  @Input() style: Record<string, unknown> = {};
+  @Input() isLoading = false;
+  @Input() canCloseOverlay = true;
+  @Input() closeOnEscape = true;
+  @Input() ngClasses: Record<string, boolean> = {};
 
-  constructor(public readonly iconsService: JIconsService) { }
+  /**
+   * Checkboxes flagged as visible.
+   */
+  get visibleCheckboxes(): DynamicCheckbox[] {
+    return this.checkboxes.filter((cb) => cb.isVisible);
+  }
 
-  onClose() {
-    this.closeSidebar.emit()
+  /**
+   * Class map for the panel shell.
+   */
+  get panelClasses(): Record<string, boolean> {
+    return {
+      'j-sidebar': true,
+      'j-sidebar--left': this.position === 'left',
+      'j-sidebar--right': this.position === 'right',
+      'j-sidebar--small': this.size === 'small',
+      'j-sidebar--medium': this.size === 'medium',
+      'j-sidebar--large': this.size === 'large',
+      'j-sidebar--xlarge': this.size === 'xlarge',
+      [this.bgColor]: !!this.bgColor,
+      ...this.ngClasses,
+    };
+  }
+
+  onClose(): void {
+    this.closeSidebar.emit();
+  }
+
+  onOverlayClick(): void {
+    if (this.canCloseOverlay) {
+      this.onClose();
+    }
   }
 
   @HostListener('document:keydown.escape')
-  handleEscape() {
-    if (this.openSidebar) {
+  handleEscape(): void {
+    if (this.openSidebar && this.closeOnEscape) {
       this.onClose();
     }
   }

package/src/lib/components/sidebar/sidebar-static/static-sidebar.types.ts

@@ -0,0 +1,2 @@
+export type StaticSidebarSize = 'small' | 'medium' | 'large' | 'xlarge';
+export type StaticSidebarPosition = 'left' | 'right';

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

@@ -3,7 +3,7 @@
     <div class="sticky top-0 left-0 right-0 grid grid-cols-2 pb-2 justify-between items-center gap-3 pt-2 select-none bg-white dark:bg-dark-background z-2">
         <div>
             <JButton
-              [icon]="iconsService.icons.save"
+              [icon]="Icons.Save"
               [iconSize]="22"
               (clicked)="saveRecords()"
               classes="secondary"
@@ -19,24 +19,22 @@
             <div class="absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center gap-2">
                 <!-- Icono de carga -->
                 @if (isLoadingSearch) {
-                <lucide-icon [name]="iconsService.icons.loading" size="18" class="text-gray-400 animate-spin">
-                </lucide-icon>
-                }
+                <JIcon [icon]="Icons.Loader2" size="18" iconClass="text-gray-400 animate-spin" />
+}
 
                 <!-- Botón X para limpiar -->
                 @if (searchQuery && !isLoadingSearch) {
                 <button (click)="clearSearch()"
                     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>
                 }
 
                 <!-- Icono de búsqueda -->
                 @if (!isLoadingSearch && !searchQuery) {
-                <lucide-icon [name]="iconsService.icons.search" size="16" class="text-gray-400">
-                </lucide-icon>
-                }
+                <JIcon [icon]="Icons.Search" size="16" iconClass="text-gray-400" />
+}
             </div>
         </div>
     </div>
@@ -75,13 +73,13 @@
                         @if (column.sortable) {
                         <div class="ml-1">
                             @if (isLoading('sort') && column.key === sortingColumn) {
-                            <lucide-icon [name]="iconsService.icons.loading" size="16" class="text-white animate-spin"></lucide-icon>
+                            <JIcon [icon]="Icons.Loader2" size="16" iconClass="text-white animate-spin" [ariaHidden]="true" />
                             } @else if (sortColumn !== column.key || sortDirection === 'none') {
-                            <lucide-icon [name]="iconsService.icons.chevronsUpDown" size="16" class="text-white"></lucide-icon>
+                            <JIcon [icon]="Icons.ChevronsUpDown" size="16" iconClass="text-white" [ariaHidden]="true" />
                             } @else if (sortDirection === 'asc') {
-                            <lucide-icon [name]="iconsService.icons.chevronUp" size="16" class="text-white"></lucide-icon>
+                            <JIcon [icon]="Icons.ChevronUp" size="16" iconClass="text-white" [ariaHidden]="true" />
                             } @else {
-                            <lucide-icon [name]="iconsService.icons.chevronDown" size="16" class="text-white"></lucide-icon>
+                            <JIcon [icon]="Icons.ChevronDown" size="16" iconClass="text-white" [ariaHidden]="true" />
                             }
                         </div>
                         }
@@ -160,11 +158,11 @@
                         @else if (column.isDecoratorDateTime && getValue(item, column)) {
                             <div class="flex items-center gap-3 text-[14px]">
                             <div class="flex items-center gap-1">
-                                <lucide-icon [name]="iconsService.icons.calendar" size="15" class="text-gray-500 dark:text-gray-400"></lucide-icon>
+                                <JIcon [icon]="Icons.Calendar" size="15" iconClass="text-gray-500 dark:text-gray-400" [ariaHidden]="true" />
                                 <span>{{ getValue(item, column).split(',')[0] }}</span>
                             </div>
                             <div class="flex items-center gap-1">
-                                <lucide-icon [name]="iconsService.icons.clock" size="15" class="text-gray-500 dark:text-gray-400"></lucide-icon>
+                                <JIcon [icon]="Icons.Clock" size="15" iconClass="text-gray-500 dark:text-gray-400" [ariaHidden]="true" />
                                 <span>{{ getValue(item, column).split(',')[1]?.trim() }}</span>
                             </div>
                             </div>
@@ -214,14 +212,14 @@
                     >
                         <div class="flex justify-center items-center gap-1">
                         <JButton
-                            [icon]="iconsService.icons.edit"
+                            [icon]="Icons.Edit"
                             [iconSize]="20"
                             (clicked)="onEdit(item)"
                             [tooltip]="'Editar'"
                             classes="warning_secondary min-w-auto p-[1px]! pl-[5px]! pr-[5px]!"
                         />
                         <JButton
-                            [icon]="iconsService.icons.delete"
+                            [icon]="Icons.Trash"
                             [iconSize]="20"
                             (clicked)="onDelete($index)"
                             [tooltip]="'Eliminar'"
@@ -240,7 +238,7 @@
               <td [attr.colspan]="columns.length + 1"
                   class="px-4 py-8 text-center text-sm text-black dark:text-white">
                 <div class="absolute inset-0 flex flex-col gap-3 items-center justify-center py-4 bg-white/80 dark:bg-foreground/80 backdrop-blur-sm z-501 select-none rounded">
-                  <lucide-icon [name]="iconsService.icons.info" size="35" class="text-primary"></lucide-icon>
+                  <JIcon [icon]="Icons.Info" size="35" iconClass="text-primary" [ariaHidden]="true" />
                   <p class="text-black dark:text-white">No hay datos disponibles</p>
                 </div>
               </td>