tailjng 0.0.60 → 0.0.62

package/cli/settings/components-list.js

@@ -108,7 +108,7 @@ function getComponentList() {
         },
         'form-sidebar': {
             path: "src/lib/components/form/form-sidebar",
-            dependencies: ["tooltip", "button", "checkbox-switch"],
+            dependencies: ["tooltip", "button", "checkbox-switch", "coach-mark"],
         },
         'paginator-complete': {
             path: "src/lib/components/paginator/paginator-complete",
@@ -130,17 +130,21 @@ function getComponentList() {
             path: "src/lib/components/menu/menu-options-table",
             dependencies: ["button"],
         },
+        'options-coach-menu': {
+            path: "src/lib/components/menu/options-coach-menu",
+            dependencies: ["button", "coach-mark"],
+        },
 
 
 
 
         'table-crud-complete': {
             path: "src/lib/components/table/table-crud-complete",
-            dependencies: ["button", "paginator-complete", "filter-complete", "checkbox-input", "menu-options-table", "dialog", "viewer-image", "select-dropdown", "input"],
+            dependencies: ["button", "paginator-complete", "filter-complete", "checkbox-input", "options-coach-menu", "dialog", "viewer-image", "select-dropdown", "input"],
         },
         'table-complete': {
             path: "src/lib/components/table/table-complete",
-            dependencies: ["button", "paginator-complete", "filter-complete", "checkbox-input", "menu-options-table", "dialog", "viewer-image", "select-dropdown", "input"],
+            dependencies: ["button", "paginator-complete", "filter-complete", "checkbox-input", "options-coach-menu", "dialog", "viewer-image", "select-dropdown", "input"],
         },
         'theme-generator': {
             path: "src/lib/components/theme-generator",

package/cli/settings/header-generator.js

@@ -27,7 +27,7 @@ Authors:
 License:
   This project is licensed under the BSD 3-Clause - see the LICENSE file for more details.
 
-Version: 0.0.59
+Version: 0.0.62
 Creation Date: 2025-01-04
 ===============================================`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailjng",
-  "version": "0.0.60",
+  "version": "0.0.62",
   "peerDependencies": {
     "@angular/common": "^19.2.0",
     "@angular/core": "^19.2.0",

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

@@ -53,7 +53,7 @@
   } @else if (displayData.length > 0) {
 
     @if (itemTemplate) {
-      <div class="grid grid-cols-4 items-start max-[1300px]:grid-cols-3 max-[1150px]:grid-cols-2 max-[800px]:grid-cols-1 gap-4 my-4">
+      <div class="grid grid-cols-4 max-[1200px]:grid-cols-3 max-[950px]:grid-cols-2 max-[650px]:grid-cols-1 items-start gap-4 my-4">
         @for (item of displayData; track trackById($index, item)) {
           <div class="flex flex-col gap-3 rounded-xl border border-border dark:border-dark-border bg-white dark:bg-foreground shadow-sm hover:shadow-lg hover:border-primary/50 hover:dark:border-primary transition-all duration-300">
             <ng-container

package/src/lib/components/card/card-crud-complete/complete-crud-card.component.html

@@ -53,7 +53,7 @@
   } @else if (displayData.length > 0) {
 
     @if (itemTemplate) {
-      <div class="grid grid-cols-4 items-start max-[1300px]:grid-cols-3 max-[1150px]:grid-cols-2 max-[800px]:grid-cols-1 gap-4 my-4">
+      <div class="grid grid-cols-4 max-[1200px]:grid-cols-3 max-[950px]:grid-cols-2 max-[650px]:grid-cols-1 items-start gap-4 my-4">
         @for (item of displayData; track trackById($index, item)) {
           <div class="flex flex-col rounded-xl border border-border dark:border-dark-border bg-white dark:bg-foreground shadow-sm hover:shadow-lg hover:border-primary/50 hover:dark:border-primary transition-all duration-300">
             <ng-container

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

@@ -9,7 +9,10 @@
           type="text"
           [(ngModel)]="searchQuery"
           [placeholder]="searchPlaceholder"
-          class="input w-full w-full min-[400px]:min-w-[275px] h-[40px] max-[400px]:h-[35px] text-[12px] bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white placeholder:text-muted-foreground/70 dark:placeholder:text-dark-muted-foreground/70 rounded px-3 py-2 pr-12 max-[400px]:pr-10 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-dark-primary transition duration-200 resize-y disabled:opacity-60 disabled:cursor-not-allowed"
+          class="input w-[250px] max-[768px]:w-full! h-[40px] max-[400px]:h-[35px] text-[12px] bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white placeholder:text-muted-foreground/70 dark:placeholder:text-dark-muted-foreground/70 rounded px-3 py-2 pr-12 max-[400px]:pr-10 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-dark-primary transition duration-200 resize-y disabled:opacity-60 disabled:cursor-not-allowed"
+          [ngClass]="{
+            'bg-white dark:bg-foreground': !isbackground
+          }"
         />
 
         <div
@@ -57,6 +60,7 @@
           placeholder="Mostrar"
           title="Mostrar elementos"
           [options]="itemsPerPageOptions"
+          [ngClasses]="{ '!bg-white dark:!bg-foreground': !isbackground }"
         />
       </div>
     }
@@ -68,6 +72,7 @@
           type="multi-table"
           title="Seleccionar columnas"
           [columns]="visibleColumns"
+          [ngClasses]="{ '!bg-white dark:!bg-foreground': !isbackground }"
         />
       </div>
     }

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

@@ -1,4 +1,5 @@
 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';
@@ -12,7 +13,7 @@ import { JButtonComponent } from '../../button/button.component';
 @Component({
   selector: 'JFilter',
   standalone: true,
-  imports: [LucideAngularModule, JDropdownSelectComponent, JMultiTableSelectComponent, JButtonComponent, JDialogComponent, FormsModule, JSwitchCheckboxComponent],
+  imports: [LucideAngularModule, JDropdownSelectComponent, JMultiTableSelectComponent, JButtonComponent, JDialogComponent, FormsModule, JSwitchCheckboxComponent, NgClass],
   templateUrl: './complete-filter.component.html',
   styleUrls: ['./complete-filter.component.scss'],
   providers: [JDialogComponent]
@@ -35,6 +36,7 @@ export class JCompleteFilterComponent implements OnInit, OnDestroy {
   @Input() isShowColumns: boolean = true;
   @Input() mainEndpoint!: string;
   @Input() data: any[] = [];
+  @Input() isbackground: boolean = false;
 
   @Input() isItemsPerPage: boolean = true;
   @Input() itemsPerPageOptions: number[] = [];

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

@@ -1,101 +1,134 @@
 <section class="content_form">
-
-    <!-- Overlay -->
-    @if (openForm) {
-        <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>
-    }
-
-    <!-- Sidebar personalizado -->
-    @if (openForm) {
-        <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'"
+  <!-- Overlay -->
+  @if (openForm) {
+    <div
+      onKeyPress
+      class="fixed top-0 left-0 w-full h-full bg-black/50 z-[999] transition duration-300"
+      (click)="canCloseOverlay ? onClose() : null"
+    ></div>
+  }
+
+  <!-- Sidebar personalizado -->
+  @if (openForm) {
+    <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 -->
+      <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>
+            {{
+              typeForm !== "none"
+                ? typeForm === "create"
+                  ? "AGREGAR"
+                  : "ACTUALIZAR"
+                : "REGISTROS"
+            }}
+            {{ typeForm !== "none" ? titleForm : "" }}
+          </span>
+
+          <JButton
+            jTooltip="Información"
+            jTooltipPosition="bottom"
+            jCoachMark
+            [coachContent]="coachContentChangePassword"
+            coachPosition="bottom"
+            coachTrigger="click"
+            [icon]="iconsService.icons.info"
+            classes="border-none shadow-none p-0 m-0 h-5 w-5 text-white"
+          />
+        </div>
+
+        <ng-template #coachContentChangePassword>
+          <div class="text-[12px] leading-[15px]">
+            <span>
+              Las etiquetas con <span class="text-[10px]">✱</span> indican
+              campos requeridos.
+            </span>
+            <br />
+            <span>
+              <span class="text-red-600 dark:text-red-300">✱</span>
+              Obligatorio
+            </span>
+            <br />
+            <span>
+              <span class="text-blue-600 dark:text-blue-300">✱</span>
+              Condicionado
+            </span>
+            <br />
+            <span>
+              <span class="text-purple-600 dark:text-purple-300">✱</span>
+              Automático
+            </span>
+          </div>
+        </ng-template>
+
+        <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"
         >
-            <!-- Header -->
-            <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>
-                        {{ typeForm !== 'none' ? typeForm === 'create' ? 'AGREGAR' : 'ACTUALIZAR' : 'REGISTROS' }} {{ typeForm !== 'none' ? titleForm : '' }}
-                    </span>
-
-                    <div class="cursor-pointer"
-                        [jTooltip]="tooltipContentChangePassword"
-                        [jTooltipPosition]="'bottom'"
-                        [jTooltipOffsetX]="25"
-                        [jTooltipOffsetY]="-20"
-                    >
-                        <lucide-icon [name]="iconsService.icons.info" [size]="15"></lucide-icon>
-                    </div>
-                </div>
-
-
-                <ng-template #tooltipContentChangePassword>
-                    <div class="text-[12px] leading-[15px]">
-                        <span>Las etiquetas con ✱ indican campos requeridos.</span> <br>
-                        <span><span class="text-red-600 dark:text-red-300">✱</span> Obligatorio</span> <br>
-                        <span><span class="text-blue-600 dark:text-blue-300">✱</span> Condicionado</span> <br>
-                        <span><span class="text-purple-600 dark:text-purple-300">✱</span> Automático</span> <br>
-                    </div>
-                </ng-template>
-
-
-                <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 (formTemplate) {
-                    <ng-container [ngTemplateOutlet]="formTemplate"></ng-container>
-                }
-            </div>
-
-
-            <!-- Footer -->
-            @if (typeForm !== 'none') {
-            <div class="p-4 border-t border-border dark:border-dark-border rounded-bl-[15px] flex justify-center gap-3">
-
-                <JButton
-                    type="submit"
-                    (clicked)="onSubmit()"
-                    classes="primary"
-                    [icon]="iconsService.icons.save"
-                    [isLoading]="isLoading"
-                >
-                    {{typeForm === 'create' ? 'AGREGAR' : 'ACTUALIZAR'}}
-                </JButton>
-
-                <JButton
-                    type="button"
-                    (clicked)="onClose()"
-                    classes="secondary"
-                    [icon]="iconsService.icons.error"
-                    text="CANCELAR"
-                />
-
-            </div>
+          <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 (formTemplate) {
+          <ng-container [ngTemplateOutlet]="formTemplate"></ng-container>
         }
-    </div>
-    }
+      </div>
 
-</section>
+      <!-- Footer -->
+      @if (typeForm !== "none") {
+        <div
+          class="p-4 border-t border-border dark:border-dark-border rounded-bl-[15px] flex justify-center gap-3"
+        >
+          <JButton
+            type="submit"
+            (clicked)="onSubmit()"
+            classes="primary"
+            [icon]="iconsService.icons.save"
+            [isLoading]="isLoading"
+          >
+            {{ typeForm === "create" ? "AGREGAR" : "ACTUALIZAR" }}
+          </JButton>
+
+          <JButton
+            type="button"
+            (clicked)="onClose()"
+            classes="secondary"
+            [icon]="iconsService.icons.error"
+            text="CANCELAR"
+          />
+        </div>
+      }
+    </div>
+  }
+</section>

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

@@ -7,11 +7,12 @@ import { DynamicCheckbox, FormType, JIconsService } from 'tailjng';
 import { JTooltipDirective } from '../../tooltip/tooltip.directive';
 import { JButtonComponent } from '../../button/button.component';
 import { JSwitchCheckboxComponent } from '../../checkbox/checkbox-switch/switch-checkbox.component';
+import { JCoachMarkDirective } from '../../coach-mark/coach-mark.directive';
 
 @Component({
   selector: 'JSidebarForm',
   standalone: true,
-  imports: [LucideAngularModule, JButtonComponent, JTooltipDirective, ReactiveFormsModule, FormsModule, CommonModule, JSwitchCheckboxComponent],
+  imports: [LucideAngularModule, JButtonComponent, JTooltipDirective, ReactiveFormsModule, FormsModule, CommonModule, JSwitchCheckboxComponent, JCoachMarkDirective],
   templateUrl: './sidebar-form.component.html',
   styleUrl: './sidebar-form.component.scss',
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -61,4 +62,4 @@ export class JSidebarFormComponent {
       this.onClose();
     }
   }
-}
+}

package/src/lib/components/input/input/input.component.css

@@ -0,0 +1,35 @@
+@media (max-width: 400px) {
+  .input-container {
+    width: 100%;
+  }
+
+  input[type="date"] {
+    appearance: none !important;
+    -webkit-appearance: none !important;
+  }
+
+  input[type="date"]::-webkit-calendar-picker-indicator {
+    opacity: 0 !important;
+    display: none !important;
+    -webkit-appearance: none !important;
+  }
+
+  input[type="date"]:not(:valid) {
+    color: transparent !important;
+  }
+
+  input[type="date"]:not(:valid)::before {
+    content: attr(placeholder) !important;
+    color: rgb(148 163 184) !important;
+  }
+}
+
+.date-fake-placeholder {
+  display: none;
+}
+
+@media (pointer: coarse) {
+  .date-fake-placeholder {
+    display: block;
+  }
+}

package/src/lib/components/input/input/input.component.html

@@ -1,29 +1,39 @@
 <div class="relative w-full">
-    <input
-        [type]="type"
-        [id]="id"
-        [name]="name ?? ''"
-        [placeholder]="placeholder"
-        [value]="value"
-        (input)="onInput($event)"
-        [required]="required"
-        [disabled]="isDisabled"
-        (blur)="onTouched()"
-        [ngClass]="combinedNgClass"
-        [class]="classes"
-        class="input w-full h-[40px] max-[400px]:h-[35px] text-[12px] bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white placeholder:text-muted-foreground/70 dark:placeholder:text-dark-muted-foreground/70 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-dark-primary transition duration-200 resize-y disabled:opacity-60 disabled:cursor-not-allowed" 
-    />
+@if (type === 'date' && !value && placeholder) {
+  <span
+    class="date-fake-placeholder pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[12px] text-muted-foreground/70 dark:text-dark-muted-foreground/70 z-[1]"
+  >
+    {{ placeholder }}
+  </span>
+}
 
-    @if (value && clearButton) {
-        <button type="button"
-          class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 text-gray-400 hover:text-gray-500 pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer"
-          (click)="clearInput()"
-          [disabled]="isDisabled"
-          [ngClass]="{
-            'cursor-not-allowed opacity-50': isDisabled
-          }"
-        >
-            <lucide-icon [name]="iconsService.icons.close" class="w-4 h-4" />
-        </button>
-    }
-</div>
+  <input
+    [type]="type"
+    [id]="id"
+    [name]="name ?? ''"
+    [placeholder]="placeholder"
+    [value]="value"
+    (input)="onInput($event)"
+    [required]="required"
+    [disabled]="isDisabled"
+    [readonly]="isReadonly"
+    (blur)="onTouched()"
+    [ngClass]="combinedNgClass"
+    [class]="classes"
+    class="input w-full h-[40px] max-[400px]:h-[35px] text-[12px] bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white placeholder:text-muted-foreground/70 dark:placeholder:text-dark-muted-foreground/70 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-dark-primary transition duration-200 resize-y disabled:opacity-60 disabled:cursor-not-allowed"
+  />
+
+  @if (value && clearButton) {
+    <button
+      type="button"
+      class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 text-gray-400 hover:text-gray-500 pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer"
+      (click)="clearInput()"
+      [disabled]="isDisabled"
+      [ngClass]="{
+        'cursor-not-allowed opacity-50': isDisabled,
+      }"
+    >
+      <lucide-icon [name]="iconsService.icons.close" class="w-4 h-4" />
+    </button>
+  }
+</div>

package/src/lib/components/input/input/input.component.ts

@@ -26,6 +26,7 @@ export class JInputComponent implements ControlValueAccessor {
   @Input() placeholder: string = '';
 
   @Input() isDisabled: boolean = false;
+  @Input() isReadonly: boolean = false;
   @Input() required: boolean = false;
   @Input() clearButton: boolean = false;
 

package/src/lib/components/menu/options-coach-menu/options-coach-menu.component.html

@@ -0,0 +1,53 @@
+<div class="relative isolate">
+  <JButton
+    onKeyPress
+    jCoachMark
+    [contentTemplate]="customTemplateActions"
+    [isDescriptionFormatted]="true"
+    coachPosition="bottom-left"
+    coachTrigger="click"
+    [coachMaxWidth]="'170px'"
+    [coachSpotlight]="false"
+    [icon]="iconsService.icons.ellipsisVertical"
+    [iconSize]="20"
+    classes="secondary w-[35px] h-[35px] rounded-full"
+    (clicked)="handleClickGeneral()"
+  />
+
+  <ng-template #customTemplateActions>
+    <div class="flex flex-col gap-2">
+      @if (optionsTable.length > 0) {
+        @for (option of optionsTable; track $index) {
+          @if (getIsVisible(option, group)) {
+            <div
+              class="w-full hover:bg-primary/10 dark:hover:bg-dark-primary/10 text-[10px]"
+            >
+              <JButton
+                onKeyPress
+                [icon]="getIcon(option.icon, group)"
+                [iconSize]="20"
+                (clicked)="handleClick(option, group)"
+                [tooltip]="getTooltip(option.tooltip ?? '', group)"
+                [tooltipPosition]="option.tooltipPosition ?? 'top'"
+                [disabled]="getDisabled(option, group)"
+                [isLoading]="false"
+                [classes]="
+                  'w-full text-left justify-start ' + (option.classes ?? '')
+                "
+                [ngClasses]="mergeNgClasses(option.ngClass, group)"
+              >
+                {{ getTooltip(option.text ?? "", group) }}
+              </JButton>
+            </div>
+          }
+        }
+      } @else {
+        <div
+          class="text-center text-gray-500 dark:text-dark-text-secondary text-xs"
+        >
+          No hay opciones disponibles
+        </div>
+      }
+    </div>
+  </ng-template>
+</div>

package/src/lib/components/menu/options-coach-menu/options-coach-menu.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input, Output, EventEmitter, ElementRef, OnDestroy, ViewChild, AfterViewInit, Renderer2 } from '@angular/core';
+import { LucideAngularModule } from 'lucide-angular';
+import { JButtonComponent } from '../../button/button.component';
+import { JIconsService } from 'tailjng';
+import { JCoachMarkDirective } from '../../coach-mark/coach-mark.directive';
+
+@Component({
+  selector: 'JOptionsCoachMenu',
+  imports: [LucideAngularModule, JButtonComponent, JCoachMarkDirective],
+  templateUrl: './options-coach-menu.component.html',
+  styleUrl: './options-coach-menu.component.scss'
+})
+export class JOptionsCoachMenuComponent {
+
+  @Input() optionsTable: any[] = [];
+  @Input() group: any;
+  @Input() rowId: string | number | null = null;
+
+  @Input() getIcon: (icon: any, group: any) => any = () => null;
+  @Input() getTooltip: (tooltip: string, group: any) => string = () => '';
+  @Input() getDisabled: (option: any, group: any) => boolean = () => false;
+  @Input() getIsVisible: (option: any, group: any) => boolean = () => true;
+  @Input() mergeNgClasses: (ngClass: any, group: any) => any = () => '';
+  @Input() isAditionalButtonLoading: (type: string, id: any) => boolean = () => false;
+
+  @Output() clicked = new EventEmitter<{ option: any; group: any }>();
+
+  
+  constructor(
+    public readonly iconsService: JIconsService,
+  ) { }
+
+  handleClick(option: any, group: any): void {
+    this.clicked.emit({ option, group });
+    this.handleClickGeneral();
+  }
+  
+  handleClickGeneral(): void {
+    document.body.click();
+  }
+}

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

@@ -17,6 +17,7 @@
         [isLoadingText]="false"
         classes="secondary h-[35px]"
         [class.disabled]="currentPage === 1 || isLoading" 
+        [ngClasses]="{ '!bg-white dark:!bg-foreground': !isbackground }"
       />
 
       <!-- Previous page -->
@@ -29,6 +30,7 @@
         [isLoading]="isButtonLoading('prev')"
         [isLoadingText]="false"
         [class.disabled]="currentPage === 1 || isLoading" 
+        [ngClasses]="{ '!bg-white dark:!bg-foreground': !isbackground }"
       />
 
       <!-- Page numbers -->
@@ -41,7 +43,10 @@
           [disabled]="currentPage === page || isLoading"
           [isLoading]="isButtonLoading(page)"
           [isLoadingText]="false"
-          [ngClasses]="{ 'primary' : currentPage === page }" 
+          [ngClasses]="{ 
+            'primary' : currentPage === page,
+            '!bg-white dark:!bg-foreground': !isbackground && currentPage !== page,
+            }" 
         />
       }
 
@@ -55,6 +60,7 @@
         [isLoading]="isButtonLoading('next')"
         [isLoadingText]="false"
         [class.disabled]="currentPage === totalPages || isLoading" 
+        [ngClasses]="{ '!bg-white dark:!bg-foreground': !isbackground }"
       />
 
       <!-- Last page -->
@@ -67,6 +73,7 @@
         [isLoading]="isButtonLoading('last')"
         [isLoadingText]="false"
         [class.disabled]="currentPage === totalPages || isLoading" 
+        [ngClasses]="{ '!bg-white dark:!bg-foreground': !isbackground }"
       />
 
   </div>

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

@@ -24,6 +24,7 @@ export class JCompletePaginatorComponent {
   @Input() itemsPerPage = this.itemsPerPageOptions[0];
   @Input() totalItems = 0;
 
+  @Input() isbackground = false;
 
   @Input() isLoading = false;
 
@@ -112,5 +113,5 @@ export class JCompletePaginatorComponent {
   isButtonLoading(button: 'first' | 'prev' | 'next' | 'last' | number): boolean {
     return this.isLoading && this.loadingButton === button;
   }
-  
+
 }

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

@@ -1,94 +1,166 @@
 <div class="relative w-full h-full">
-    <div #selectButton class="w-auto">
-        <button 
-            type="button" 
-            [disabled]="isDisabled || isLoading" 
-            (click)="toggleColumnSelector()"
-            [class]="'flex w-full h-[40px] max-[400px]:h-[35px] text-[12px] 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' + ' ' + classes" 
-            [ngClass]="{
-                'opacity-50 cursor-not-allowed pointer-events-none': isDisabled || isLoading,
-                ngClass: true
-            }"
-        >
-            <span class="truncate text-black dark:text-white" [ngClass]="{'opacity-70 text-muted-foreground dark:text-dark-muted-foreground' : selectedValue === null}">{{selectedLabel}}</span>
-            
-            <div class="flex items-center">
-                @if (showClear && selectedValue !== null) {
-                    <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]="iconsService.icons.close" size="14"></lucide-icon>
-                    </button>
-                }
-                @if (!isLoading) {
-                    <lucide-icon [name]="iconsService.icons.chevronDown" size="16" class="transition duration-300 ease-in-out text-gray-400" [ngClass]="{'rotate-180': isColumnSelectorOpen}"></lucide-icon>
-                } @else {
-                    <lucide-icon [name]="iconsService.icons.loading" size="16" class="text-gray-400 animate-spin"></lucide-icon>
-                }
-            </div>
-        </button>
-    </div>
+  <div #selectButton class="w-auto">
+    <button
+      type="button"
+      [disabled]="isDisabled || isLoading"
+      (click)="toggleColumnSelector()"
+      [class]="
+        'flex w-full h-[40px] max-[400px]:h-[35px] text-[12px] 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' +
+        ' ' +
+        classes
+      "
+      [ngClass]="getButtonNgClass()"
+    >
+      <span
+        class="truncate text-black dark:text-white"
+        [ngClass]="{
+          'opacity-70 text-muted-foreground dark:text-dark-muted-foreground':
+            selectedValue === null,
+        }"
+        >{{ selectedLabel }}</span
+      >
+
+      <div class="flex items-center">
+        @if (showClear && selectedValue !== null) {
+          <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]="iconsService.icons.close"
+              size="14"
+            ></lucide-icon>
+          </button>
+        }
+        @if (!isLoading) {
+          <lucide-icon
+            [name]="iconsService.icons.chevronDown"
+            size="16"
+            class="transition duration-300 ease-in-out text-gray-400"
+            [ngClass]="{ 'rotate-180': isColumnSelectorOpen }"
+          ></lucide-icon>
+        } @else {
+          <lucide-icon
+            [name]="iconsService.icons.loading"
+            size="16"
+            class="text-gray-400 animate-spin"
+          ></lucide-icon>
+        }
+      </div>
+    </button>
+  </div>
 </div>
 
 <!-- Dropdown positioned outside the flow -->
 @if (isColumnSelectorOpen) {
-    <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' + ' ' + classes"
-        [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>
-            
-            <!-- Search -->
-            @if (type === 'searchable' && isSearch) {
-            <div class="mb-2 relative">
-                <input type="text"
-                    [(ngModel)]="searchTerm"
-                    (input)="onSearchInput()"
-                    placeholder="Buscar..."
-                    class="input bg-dark-foreground dark:bg-foreground text-black dark:text-white w-full px-3 py-2 text-sm max-[400px]:h-[35px] max-[400px]:text-[12px] border border-border dark:border-dark-border rounded focus:outline-none focus:ring-2 focus:ring-primary" 
+  <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' +
+      ' ' +
+      classes
+    "
+    [style.width.px]="dropdownWidth"
+    [style.top.px]="dropdownTop"
+    [style.left.px]="dropdownLeft"
+    [ngClass]="getButtonNgClass()"
+  >
+    <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>
+
+      <!-- Search -->
+      @if (type === "searchable" && isSearch) {
+        <div class="mb-2 relative">
+          <input
+            type="text"
+            [(ngModel)]="searchTerm"
+            (input)="onSearchInput()"
+            placeholder="Buscar..."
+            class="input bg-dark-foreground dark:bg-foreground text-black dark:text-white w-full px-3 py-2 text-sm max-[400px]:h-[35px] max-[400px]:text-[12px] border border-border dark:border-dark-border rounded focus:outline-none focus:ring-2 focus:ring-primary"
+          />
+
+          <div class="absolute flex right-3 top-1/2 transform -translate-y-1/2">
+            @if (searchTerm) {
+              <button
+                type="button"
+                (click)="clearSearchTerm()"
+                class="pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer"
+              >
+                <lucide-icon
+                  [name]="iconsService.icons.close"
+                  size="16"
+                ></lucide-icon>
+              </button>
+            }
+            <lucide-icon
+              [name]="iconsService.icons.search"
+              size="16"
+              class="text-gray-400"
+            ></lucide-icon>
+          </div>
+        </div>
+      }
+
+      <!-- Dropdown -->
+      <div
+        class="max-h-45 max-[400px]:max-h-38 overflow-x-hidden overflow-y-auto flex flex-col gap-1 scroll-element"
+      >
+        @if (isLoading) {
+          <div
+            class="flex gap-3 text-black/50 dark:text-white/50 items-center justify-center py-4"
+          >
+            <lucide-icon
+              [name]="iconsService.icons.loading"
+              size="20"
+              class="animate-spin"
+            ></lucide-icon>
+            Cargando...
+          </div>
+        } @else {
+          @for (option of filteredOptions; track option.value) {
+            <div
+              onKeyDown
+              (click)="selectOption(option)"
+              class="flex gap-2 items-center border border-accent dark:border-dark-accent/50 px-3 py-2 rounded text-sm max-[400px]:h-[35px] max-[400px]:text-[12px] cursor-pointer text-black! dark:text-white! hover:bg-accent/50 hover:dark:bg-dark-accent/40"
+              [ngClass]="{
+                'bg-accent! dark:bg-dark-accent/80!':
+                  selectedValue === option.value,
+                'text-black': selectedValue === option.value,
+              }"
+            >
+              @if (selectedValue === option.value) {
+                <lucide-icon
+                  [name]="iconsService.icons.check"
+                  size="15"
+                  class="transition text-black dark:text-white"
                 />
+              } @else {
+                <lucide-icon
+                  [name]="iconsService.icons.squareDashedMousePointer"
+                  size="15"
+                  class="transition text-black dark:text-white opacity-40"
+                />
+              }
 
-                <div class="absolute flex right-3 top-1/2 transform -translate-y-1/2 ">
-                    @if (searchTerm) {
-                        <button 
-                            type="button" 
-                            (click)="clearSearchTerm()" 
-                            class="pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer"
-                        >
-                            <lucide-icon [name]="iconsService.icons.close" size="16"></lucide-icon>
-                        </button>
-                    }
-                    <lucide-icon [name]="iconsService.icons.search" size="16" class="text-gray-400"></lucide-icon>
-                </div>
+              <div
+                class="flex items-center break-words whitespace-normal overflow-hidden"
+              >
+                {{ option.text }}
+              </div>
             </div>
-            }
-            
-            <!-- Dropdown -->
-            <div class="max-h-40 max-[400px]:max-h-38 overflow-x-hidden overflow-y-auto flex flex-col gap-1 scroll-element">
-                @if (isLoading) {
-                    <div class="flex gap-3 text-black/50 dark:text-white/50 items-center justify-center py-4">
-                        <lucide-icon [name]="iconsService.icons.loading" size="20" class="animate-spin"></lucide-icon>
-                        Cargando...
-                    </div>
-                } @else {
-                    @for (option of filteredOptions; track option.value) {
-                        <div onKeyDown 
-                            (click)="selectOption(option)"
-                            class="px-3 py-2 rounded text-sm max-[400px]:h-[35px] max-[400px]:text-[12px] cursor-pointer text-black! dark:text-white! hover:bg-accent/50 hover:dark:bg-dark-accent/40"
-                            [ngClass]="{'bg-accent! dark:bg-dark-accent/80!': selectedValue === option.value, 'text-black': selectedValue === option.value}">
-                            <div class="flex items-center break-words whitespace-normal overflow-hidden">
-                                {{option.text}}
-                            </div>
-                        </div>
-                    }
-                    @if (filteredOptions.length === 0) {
-                        <div class="px-3 py-2 text-sm text-gray-500">No hay opciones disponibles</div>
-                    }
-                }
+          }
+          @if (filteredOptions.length === 0) {
+            <div class="px-3 py-2 text-sm text-gray-500">
+              No hay opciones disponibles
             </div>
-        </div>
+          }
+        }
+      </div>
     </div>
+  </div>
 }

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

@@ -1,3 +1,4 @@
+
 import { Component, Input, Output, EventEmitter, ElementRef, ViewChild, OnDestroy, ChangeDetectorRef, AfterViewInit, OnInit, SimpleChanges, OnChanges, } from "@angular/core"
 import { FormsModule, ControlValueAccessor, ReactiveFormsModule, NG_VALUE_ACCESSOR } from "@angular/forms"
 import { CommonModule } from "@angular/common"
@@ -55,9 +56,9 @@ export class JDropdownSelectComponent implements ControlValueAccessor, AfterView
 
   @Input() isSearch = true;
   @Input() isFilterSelect = false;
-  
+
   @Input() classes: string = '';
-  @Input() ngClass: { [key: string]: boolean } = {};
+  @Input() ngClasses: { [key: string]: boolean } = {};
 
   @Output() selectionChange = new EventEmitter<any>();
   @Output() fullData = new EventEmitter<any[]>();
@@ -662,4 +663,15 @@ export class JDropdownSelectComponent implements ControlValueAccessor, AfterView
     const isInitialState = this.selectedValue === null
     return isSearchActive || isInitialState
   }
+
+  /**
+   * Get the ngClass for the button based on disabled and loading state
+   * @returns 
+   */
+  getButtonNgClass(): { [key: string]: boolean } {
+    return {
+      'opacity-50 cursor-not-allowed pointer-events-none': this.isDisabled || this.isLoading,
+      ...this.ngClasses,
+    };
+  }
 }

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

@@ -5,6 +5,7 @@
             classes="secondary"
             [icon]="btnIcon"
             [disabled]="isDisabled"
+            [ngClasses]="getButtonNgClass()"
         >
             {{btnText}}
         </JButton>
@@ -18,6 +19,7 @@
         [style.width.px]="dropdownWidth"
         [style.top.px]="dropdownTop"
         [style.left.px]="dropdownLeft"
+        [ngClass]="getButtonNgClass()"
     >
         <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>

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

@@ -31,6 +31,7 @@ export class JMultiTableSelectComponent implements AfterViewInit, OnInit, OnChan
   @Input() showActions = true;
   @Input() isFilterSelect = false;
 
+  @Input() ngClasses: { [key: string]: boolean } = {};
 
   @Output() columnToggle = new EventEmitter<{ column: TableColumn<any>; visible: boolean }>();
   @Input() columns: TableColumn<any>[] = [];
@@ -413,4 +414,15 @@ export class JMultiTableSelectComponent implements AfterViewInit, OnInit, OnChan
     const column = this.columns.find((col) => col.key === key);
     return column?.visible ?? false;
   }
+
+  /**
+   * Get the ngClass for the button based on disabled and loading state
+   * @returns 
+   */
+  getButtonNgClass(): { [key: string]: boolean } {
+    return {
+      'opacity-50 cursor-not-allowed pointer-events-none': this.isDisabled,
+      ...this.ngClasses,
+    };
+  }
 }

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

@@ -41,7 +41,7 @@
         </div>
     </div>
 
-  <div class="j-table relative border border-border dark:border-dark-border rounded">
+  <div class="relative border border-border dark:border-dark-border rounded">
     <div class="overflow-x-auto rounded scroll-element pr-0!" style="overflow-y: hidden;">
       <table class="min-w-full bg-white dark:bg-dark-background rounded">
         <thead class="bg-primary dark:bg-dark-primary text-white dark:text-white select-none h-[50px]">

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

@@ -1,5 +0,0 @@
-.j-table {
-    @media (max-width: 470px) {
-          width: 485px !important;
-    }
-}

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

@@ -10,6 +10,7 @@
       [isSearch]="isSearch"
       [isShowColumns]="isEyeColumn"
       (search)="onSearch()"
+      [isbackground]="isbackground"
       [searchPlaceholder]="searchPlaceholder"
       [isItemsPerPage]="isItemsPerPage"
       [(itemsPerPage)]="itemsPerPage"
@@ -41,13 +42,14 @@
         [pages]="pages"
         (pageChange)="handlePageChange($event)"
         [isLoading]="isLoading('pagination')"
+        [isbackground]="isbackground"
       />
     </div>
   }
 
   <!-- Table -->
   <div
-    class="relative block max-[400px]:hidden border border-border dark:border-dark-border rounded"
+    class="relative block max-[768px]:hidden border border-border dark:border-dark-border rounded"
   >
     <div
       class="overflow-x-auto rounded scroll-element pr-0!"
@@ -491,7 +493,7 @@
                       >
                         <div class="flex justify-center items-center">
                           @if (optionsType === "dropdown") {
-                            <JOptionsTableMenu
+                            <JOptionsCoachMenu
                               [optionsTable]="optionsTable"
                               [group]="item"
                               [rowId]="'group_' + item.id || 'group_' + $index"
@@ -798,7 +800,7 @@
                               class="relative overflow-visible flex justify-center items-center space-x-2 min-w-[50px] px-4 py-2 h-[50px]"
                             >
                               @if (optionsType === "dropdown") {
-                                <JOptionsTableMenu
+                                <JOptionsCoachMenu
                                   [optionsTable]="optionsTable"
                                   [group]="group"
                                   [rowId]="
@@ -954,7 +956,7 @@
   </div>
 
   <!-- TABLE MOVILE -->
-  <div class="hidden max-[400px]:block">
+  <div class="hidden max-[768px]:block">
     <div class="flex flex-col gap-3">
       @if (isLoading("initialLoad") && displayData.length === 0) {
         <div
@@ -990,14 +992,14 @@
 
                 <div class="flex-1 min-w-0 max-w-full overflow-hidden">
                   <div
-                    class="font-bold text-[12px] leading-tight block overflow-hidden text-ellipsis whitespace-nowrap max-w-[200px]"
+                    class="font-bold text-[12px] leading-tight block overflow-hidden text-ellipsis whitespace-nowrap max-[400px]:max-w-[200px] max-[768px]:max-w-[500px]"
                   >
                     {{ getMobileMainTitle(item) }}
                   </div>
 
                   @if (getMobileMainDescription(item)) {
                     <div
-                      class="text-[12px] leading-snug break-words whitespace-normal max-w-[200px]"
+                      class="text-[12px] leading-snug break-words whitespace-normal max-[400px]:max-w-[200px] max-[768px]:max-w-[500px]"
                     >
                       {{ getMobileMainDescription(item) }}
                     </div>
@@ -1367,6 +1369,7 @@
         [pages]="pages"
         (pageChange)="handlePageChange($event)"
         [isLoading]="isLoading('pagination')"
+        [isbackground]="isbackground"
       />
     </div>
   }

package/src/lib/components/table/table-crud-complete/complete-crud-table.component.ts

@@ -13,16 +13,16 @@ import { JCompletePaginatorComponent } from '../../paginator/paginator-complete/
 import { JCompleteFilterComponent } from '../../filter/filter-complete/complete-filter.component';
 import { JButtonComponent } from '../../button/button.component';
 import { JInputCheckboxComponent } from '../../checkbox/checkbox-input/input-checkbox.component';
-import { JOptionsTableMenuComponent } from '../../menu/menu-options-table/options-table-menu.component';
 import { JDialogComponent } from '../../dialog/dialog.component';
 import { JDropdownSelectComponent } from '../../select/select-dropdown/dropdown-select.component';
 import { JInputComponent } from '../../input/input/input.component';
 import { JImageViewerComponent } from '../../viewer/viewer-image/image-viewer.component';
+import { JOptionsCoachMenuComponent } from '../../menu/options-coach-menu/options-coach-menu.component';
 
 @Component({
   selector: 'JCompleteCrudTable',
   standalone: true,
-  imports: [CommonModule, FormsModule, JCompletePaginatorComponent, JCompleteFilterComponent, LucideAngularModule, JButtonComponent, JInputCheckboxComponent, JOptionsTableMenuComponent, JDialogComponent, JImageViewerComponent, JDropdownSelectComponent, JInputComponent],
+  imports: [CommonModule, FormsModule, JCompletePaginatorComponent, JCompleteFilterComponent, LucideAngularModule, JButtonComponent, JInputCheckboxComponent, JDialogComponent, JImageViewerComponent, JDropdownSelectComponent, JInputComponent, JOptionsCoachMenuComponent],
   templateUrl: './complete-crud-table.component.html',
   styleUrl: './complete-crud-table.component.scss',
   animations: [
@@ -66,6 +66,7 @@ export class JCompleteCrudTableComponent implements OnInit {
   @Input() defaultFilters: { [key: string]: any } = {};
   @Input() isPaginator = true;
   @Input() isFilter = true;
+  @Input() isbackground = false;
   @Input() isSearch = true;
   @Input() isEyeColumn = true;
   @Input() hideRowCondition?: (row: any) => boolean