tailjng 0.0.61 → 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.61
+Version: 0.0.62
 Creation Date: 2025-01-04
 ===============================================`
 

package/package.json

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

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/table/table-crud-complete/complete-crud-table.component.html

@@ -493,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"
@@ -800,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]="

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: [