tailjng 0.1.7 → 0.1.9

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

@@ -1,15 +1,21 @@
 @if (openForm) {
   <div
-    class="j-form-sidebar-overlay"
+    class="fixed inset-0 z-[999] bg-black/50 backdrop-blur-[1px] animate-sidebar-overlay-in"
     aria-hidden="true"
     (click)="onOverlayClick()"
   ></div>
 }
 
 <ng-template #sidebarContent>
-  <header class="j-form-sidebar-header">
-    <div class="j-form-sidebar-title-wrap">
-      <h2 class="j-form-sidebar-title">{{ displayTitle }}</h2>
+  <header
+    class="flex shrink-0 items-center gap-3 min-h-[3.25rem] border-b border-border bg-primary py-2.5 pr-3 pl-4 dark:border-dark-border dark:bg-dark-primary"
+  >
+    <div class="inline-flex min-w-0 flex-1 items-center gap-1.5">
+      <h2
+        class="m-0 min-w-0 flex-1 truncate text-[0.9375rem] font-semibold leading-snug tracking-tight text-white dark:text-dark-foreground"
+      >
+        {{ displayTitle }}
+      </h2>
 
       <JButton
         jTooltip="Información"
@@ -19,12 +25,12 @@
         coachPosition="bottom"
         coachTrigger="click"
         [icon]="Icons.Info"
-        classes="border-none shadow-none p-0 m-0 h-5 w-5 opacity-80!"
+        classes="text-white border-none shadow-none p-0 m-0 h-5 w-5 opacity-80!"
       />
     </div>
 
     <ng-template #coachLegendTpl>
-      <div class="j-form-sidebar-coach">
+      <div class="text-xs leading-5">
         <span>
           Las etiquetas con <span class="text-[10px]">✱</span> indican campos
           requeridos.
@@ -44,19 +50,21 @@
       </div>
     </ng-template>
 
-    <div class="j-form-sidebar-header-actions">
+    <div class="inline-flex shrink-0 items-center gap-2">
       @for (cb of visibleCheckboxes; track $index) {
         <JSwitchCheckbox
           [title]="cb.title"
           [isChecked]="cb.isChecked"
           [isLoading]="cb.isLoading"
           (click)="cb.onClick(!cb.isChecked, $index)"
+          classes="text-white!"
+          classesText="text-white!"
         />
       }
 
       <button
         type="button"
-        class="j-form-sidebar-close"
+        class="inline-flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-dark-primary/30 dark:bg-primary/30 p-0 leading-none text-white/70 transition-[color,background-color,transform] duration-150 hover:bg-dark-primary/80 hover:dark:bg-primary/80 hover:text-white active:scale-[0.94] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring dark:hover:text-dark-foreground"
         aria-label="Cerrar"
         (click)="onClose()"
       >
@@ -70,14 +78,18 @@
     </div>
   </header>
 
-  <div class="j-form-sidebar-body scroll-element">
+  <div
+    class="scroll-element min-h-0 flex-1 overflow-x-hidden overflow-y-auto p-4 text-foreground dark:text-dark-foreground bg-white dark:bg-foreground"
+  >
     @if (formTemplate) {
       <ng-container [ngTemplateOutlet]="formTemplate" />
     }
   </div>
 
   @if (showFooter) {
-    <footer class="j-form-sidebar-footer">
+    <footer
+      class="flex shrink-0 justify-center gap-3 border-t border-border bg-[color-mix(in_srgb,var(--color-muted)_18%,var(--color-background))] p-4 dark:border-dark-border dark:bg-[color-mix(in_srgb,var(--color-dark-muted)_22%,var(--color-dark-background))]"
+    >
       <JButton
         type="submit"
         classes="primary"

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

@@ -105,16 +105,21 @@ export class JSidebarFormComponent {
   }
 
   get panelClasses(): Record<string, boolean> {
+    const sizeClass: Record<FormSidebarSize, string> = {
+      small: 'w-[22em]',
+      medium: 'w-[30em]',
+      large: 'w-[47em]',
+      xlarge: 'w-[65em]',
+    };
+
     return {
-      'j-form-sidebar': true,
-      'j-form-sidebar--left': this.position === 'left',
-      'j-form-sidebar--right': this.position === 'right',
-      'j-form-sidebar--small': this.size === 'small',
-      'j-form-sidebar--medium': this.size === 'medium',
-      'j-form-sidebar--large': this.size === 'large',
-      'j-form-sidebar--xlarge': this.size === 'xlarge',
+      'fixed top-0 z-[999] flex h-full max-w-full flex-col overflow-hidden border border-border bg-background dark:border-dark-border dark:bg-dark-background max-md:w-full! max-md:max-w-full max-md:rounded-none': true,
+      [sizeClass[this.size]]: true,
+      'right-0 border-r-0 rounded-l-xl shadow-[-8px_0_32px_rgb(0_0_0/0.12)] dark:shadow-[-8px_0_32px_rgb(0_0_0/0.35)] max-md:border-l-0': this.position === 'right',
+      'left-0 border-l-0 rounded-r-xl shadow-[8px_0_32px_rgb(0_0_0/0.12)] dark:shadow-[8px_0_32px_rgb(0_0_0/0.35)] max-md:border-r-0': this.position === 'left',
       [this.bgColor]: !!this.bgColor,
-      ...this.ngClasses};
+      ...this.ngClasses,
+    };
   }
 
   onSubmit(): void {

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

@@ -1,8 +1,4 @@
 @media (max-width: 400px) {
-  .input-container {
-    width: 100%;
-  }
-
   input[type="date"] {
     appearance: none !important;
     -webkit-appearance: none !important;
@@ -23,13 +19,3 @@
     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,7 +1,7 @@
 <div class="relative w-full">
   @if (showDatePlaceholder) {
     <span
-      class="date-fake-placeholder pointer-events-none absolute left-3 top-1/2 z-[1] -translate-y-1/2 text-[12px] text-muted-foreground/70 dark:text-dark-muted-foreground/70"
+      class="date-fake-placeholder pointer-events-none absolute left-3 top-1/2 z-[1] hidden -translate-y-1/2 text-[12px] text-muted-foreground/70 pointer-coarse:block dark:text-dark-muted-foreground/70"
     >
       {{ placeholder }}
     </span>

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

@@ -76,7 +76,7 @@ export class JFileInputComponent implements ControlValueAccessor, OnInit, OnDest
   @Input() heightImgFile = 0;
 
   // Placeholder when no file is selected
-  @Input() placeholder = 'Select file...';
+  @Input() placeholder = 'Seleccionar archivo...';
 
   // Extra Tailwind classes on the visible label
   @Input() classes = '';

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

@@ -48,6 +48,30 @@ export class JLabelComponent {
   // required = red · conditioned = blue · automated = purple · null = none
   @Input() indicator: LabelIndicator | null = null;
 
+  /** @deprecated Use `[indicator]="'required'"` instead. */
+  @Input() set isRequired(value: boolean) {
+    if (value) {
+      this.indicator = 'required';
+      return;
+    }
+
+    if (this.indicator === 'required') {
+      this.indicator = null;
+    }
+  }
+
+  /** @deprecated Use `[indicator]="'conditioned'"` instead. */
+  @Input() set isConditioned(value: boolean) {
+    if (value) {
+      this.indicator = 'conditioned';
+      return;
+    }
+
+    if (this.indicator === 'conditioned') {
+      this.indicator = null;
+    }
+  }
+
   /**
    * Whether the indicator asterisk should render.
    * @returns `true` when `indicator` is set.

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

@@ -4,8 +4,8 @@
   [isDescriptionFormatted]="true"
   coachPosition="bottom-left"
   coachTrigger="click"
-  coachMaxWidth="170px"
-  coachWidth="170px"
+  coachMaxWidth="180px"
+  coachWidth="180px"
   [coachSpotlight]="false"
   size="icon"
   [icon]="Icons.EllipsisVertical"

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

@@ -61,9 +61,9 @@ export class JOptionsCoachMenuComponent {
       'min-h-[30px]',
       'text-left',
       'justify-start',
-      'text-[14px]',
+      'text-[12px]',
       'leading-tight',
-      'font-medium',
+      'font-normal',
       option.classes ?? '',
     ]
       .filter(Boolean)

package/src/lib/components/progress-bar/progress-bar.component.css

@@ -1,11 +0,0 @@
-.j-progress-bar__label {
-  z-index: 1;
-}
-
-.j-progress-bar__label--fill {
-  z-index: 2;
-}
-
-.j-progress-bar__fill {
-  min-width: 0;
-}

package/src/lib/components/progress-bar/progress-bar.component.html

@@ -9,7 +9,7 @@
   >
     @if (showFilledLabel) {
       <div
-        class="j-progress-bar__fill absolute inset-y-0 left-0 bg-primary transition-all duration-300 ease-in-out dark:bg-dark-primary"
+        class="j-progress-bar__fill absolute inset-y-0 left-0 min-w-0 bg-primary transition-all duration-300 ease-in-out dark:bg-dark-primary"
         [style.width.%]="fillPercent"
         [style.border-radius.px]="borderRadius"
       ></div>
@@ -17,7 +17,7 @@
   </div>
 
   <div
-    class="j-progress-bar__label j-progress-bar__label--track pointer-events-none absolute inset-0 flex items-center justify-center overflow-hidden"
+    class="j-progress-bar__label j-progress-bar__label--track pointer-events-none absolute inset-0 z-[1] flex items-center justify-center overflow-hidden"
     [style.border-radius.px]="borderRadius"
     [style.opacity]="disabled ? 0.3 : 1"
   >
@@ -31,7 +31,7 @@
 
   @if (showFilledLabel) {
     <div
-      class="j-progress-bar__label j-progress-bar__label--fill pointer-events-none absolute inset-0 flex items-center justify-center"
+      class="j-progress-bar__label j-progress-bar__label--fill pointer-events-none absolute inset-0 z-[2] flex items-center justify-center"
       [style.clip-path]="fillClipPath"
       [style.border-radius.px]="borderRadius"
     >

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

@@ -2,9 +2,3 @@
   display: block;
   width: 100%;
 }
-
-/* Floating panel — coordinates set in TS via positionDropdownPanel */
-.jdropdown-panel {
-  position: fixed;
-  z-index: 1100;
-}

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

@@ -26,7 +26,7 @@
           <button
             type="button"
             (click)="clearSelection($event)"
-            class="pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer"
+            class="flex items-center justify-center pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer"
           >
             <JIcon
               [icon]="Icons.X"
@@ -63,7 +63,7 @@
     #dropdownPanel
     @modalTransition
     [class]="
-      'jdropdown-panel min-w-[250px] bg-background dark:bg-dark-background rounded-lg shadow-lg border border-border border-dark-border' +
+      'jdropdown-panel fixed z-[1100] min-w-[250px] bg-background dark:bg-dark-background rounded-lg shadow-lg border border-border border-dark-border' +
       ' ' +
       classes
     "
@@ -93,7 +93,7 @@
               <button
                 type="button"
                 (click)="clearSearchTerm()"
-                class="pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer"
+                class="flex items-center justify-center pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer"
               >
                 <JIcon
                   [icon]="Icons.X"

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

@@ -180,7 +180,7 @@ export class JDropdownSelectComponent
   @Input() ngClasses: Record<string, boolean> = {};
 
   /** Emits the selected raw value or `null` when cleared. */
-  @Output() selectionChange = new EventEmitter<unknown>();
+  @Output() selectionChange = new EventEmitter<any>();
 
   /** Searchable: emits the full API result array after each load. */
   @Output() fullData = new EventEmitter<unknown[]>();

package/src/lib/components/select/select-multi-dropdown/multi-dropdown-select.component.css

@@ -2,9 +2,3 @@
   display: block;
   width: 100%;
 }
-
-/* Floating panel — coordinates set in TS via positionDropdownPanel */
-.jdropdown-panel {
-  position: fixed;
-  z-index: 1100;
-}

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

@@ -23,7 +23,7 @@
           <button
             type="button"
             (click)="clearSelection($event)"
-            class="pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer"
+            class="flex items-center justify-center pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer"
           >
             <JIcon
               [icon]="Icons.X"
@@ -59,7 +59,7 @@
   <div
     #dropdownPanel
     @modalTransition
-    class="jdropdown-panel min-w-[250px] bg-background dark:bg-dark-background rounded-lg shadow-lg border border-border border-dark-border"
+    class="jdropdown-panel fixed z-[1100] min-w-[250px] bg-background dark:bg-dark-background rounded-lg shadow-lg border border-border border-dark-border"
     [style.width.px]="dropdownWidth"
   >
     <div class="pt-1 pl-3 pr-3 pb-3">
@@ -82,7 +82,7 @@
               <button
                 type="button"
                 (click)="clearSearchTerm()"
-                class="pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer"
+                class="flex items-center justify-center pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer"
               >
                 <JIcon
                   [icon]="Icons.X"

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

@@ -202,7 +202,7 @@ export class JMultiDropdownSelectComponent
   @Input() maxDisplayItems = 3;
 
   /** Emits the array of selected values (empty when cleared). */
-  @Output() selectionChange = new EventEmitter<unknown[]>();
+  @Output() selectionChange = new EventEmitter<any[]>();
 
   /** @deprecated Kept for backward compatibility; panel positioning no longer uses this flag. */
   @Input() isFilterSelect = false;

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

@@ -2,9 +2,3 @@
   display: block;
   width: 100%;
 }
-
-/* Floating panel — coordinates set in TS via positionDropdownPanel */
-.jdropdown-panel {
-  position: fixed;
-  z-index: 1100;
-}

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

@@ -3,7 +3,7 @@
   <div #selectButton class="min-w-[40px] max-[400px]:min-w-[30px]">
     <JButton
       (clicked)="toggleColumnSelector()"
-      classes="secondary"
+      classes="secondary w-[40px] h-[40px]"
       [icon]="btnIcon"
       [disabled]="isDisabled"
       [ngClasses]="getButtonNgClass()"
@@ -18,7 +18,7 @@
   <div
     #dropdownPanel
     @modalTransition
-    class="jdropdown-panel min-w-[250px] max-w-[250px] bg-background dark:bg-dark-background rounded-lg shadow-lg border border-border border-dark-border"
+    class="jdropdown-panel fixed z-[1100] min-w-[250px] max-w-[250px] bg-background dark:bg-dark-background rounded-lg shadow-lg border border-border border-dark-border"
     [style.width.px]="dropdownWidth"
   >
     <div class="pt-1 pl-3 pr-3 pb-3">

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

@@ -2,16 +2,7 @@
   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 {
+@keyframes sidebar-overlay-in {
   from {
     opacity: 0;
   }
@@ -21,6 +12,10 @@
   }
 }
 
+.animate-sidebar-overlay-in {
+  animation: sidebar-overlay-in 300ms ease-out;
+}
+
 .j-sidebar {
   position: fixed;
   top: 0;
@@ -81,23 +76,15 @@
 }
 
 .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%,
@@ -105,36 +92,6 @@
   );
 }
 
-.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;
@@ -181,20 +138,6 @@
   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;

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

@@ -1,20 +1,28 @@
 @if (openSidebar) {
   <div
-    class="j-sidebar-overlay"
+    class="fixed inset-0 z-[998] bg-black/50 backdrop-blur-[1px] animate-sidebar-overlay-in"
     aria-hidden="true"
     (click)="onOverlayClick()"
   ></div>
 }
 
 <ng-template #sidebarContent>
-  <header class="j-sidebar-header">
+  <header
+    class="j-sidebar-header flex shrink-0 items-center gap-3 min-h-[3.25rem] border-b border-border py-2.5 pr-3 pl-4 dark:border-dark-border"
+  >
     @if (titleForm) {
-      <h2 class="j-sidebar-title">{{ titleForm }}</h2>
+      <h2
+        class="m-0 min-w-0 flex-1 truncate text-[0.9375rem] font-semibold leading-[1.3] tracking-[-0.015em] text-foreground dark:text-dark-foreground"
+      >
+        {{ titleForm }}
+      </h2>
     } @else {
-      <span class="j-sidebar-title j-sidebar-title--placeholder"></span>
+      <span
+        class="m-0 min-h-5 min-w-0 flex-1 truncate text-[0.9375rem] font-semibold leading-[1.3] tracking-[-0.015em] text-foreground dark:text-dark-foreground"
+      ></span>
     }
 
-    <div class="j-sidebar-header-actions">
+    <div class="inline-flex shrink-0 items-center gap-2">
       @for (cb of visibleCheckboxes; track $index) {
         <JSwitchCheckbox
           [title]="cb.title"
@@ -35,7 +43,9 @@
     </div>
   </header>
 
-  <div class="j-sidebar-body scroll-element">
+  <div
+    class="scroll-element min-h-0 flex-1 overflow-x-hidden overflow-y-auto p-4 text-foreground dark:text-dark-foreground"
+  >
     @if (sidebarTemplate) {
       <ng-container [ngTemplateOutlet]="sidebarTemplate" />
     }

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

@@ -1,19 +1,19 @@
 <div class="w-full mb-3 flex flex-col">
 
-    <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 class="sticky top-0 left-0 right-0 grid grid-cols-2 pb-2 justify-between items-center gap-3 pt-2 select-none z-2">
         <div>
             <JButton
               [icon]="Icons.Save"
               [iconSize]="22"
               (clicked)="saveRecords()"
-              classes="secondary"
-              [ngClasses]="{'min-w-auto p-1! pl-2! pr-2!' : true}"
+              classes="primary"
+              [ngClasses]="{'min-w-auto h-[40px] p-1! pl-2! pr-2!' : true}"
             >Enviar</JButton>
         </div>
 
         <div class="relative w-full">
             <input type="text" [(ngModel)]="searchQuery" [placeholder]="searchPlaceholder" (ngModelChange)="onSearch()"
-                class="input w-full h-[40px] bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white rounded px-3 py-2 pr-16 focus:outline-none focus:ring-2 focus:ring-primary" />
+                class="input w-full h-[40px] bg-white dark:bg-foreground border border-border dark:border-dark-border text-black dark:text-white rounded px-3 py-2 pr-16 focus:outline-none focus:ring-2 focus:ring-primary" />
 
             <!-- Iconos dentro del input -->
             <div class="absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center gap-2">
@@ -216,14 +216,14 @@
                             [iconSize]="20"
                             (clicked)="onEdit(item)"
                             [tooltip]="'Editar'"
-                            classes="warning_secondary min-w-auto p-[1px]! pl-[5px]! pr-[5px]!"
+                            classes="warning_secondary min-w-[35px] h-[35px] p-[1px]! pl-[5px]! pr-[5px]!"
                         />
                         <JButton
                             [icon]="Icons.Trash"
                             [iconSize]="20"
                             (clicked)="onDelete($index)"
                             [tooltip]="'Eliminar'"
-                            classes="error_secondary min-w-auto p-[1px]! pl-[5px]! pr-[5px]!"
+                            classes="error_secondary min-w-[35px] h-[35px] p-[1px]! pl-[5px]! pr-[5px]!"
                         />
                         </div>
                         <div class="absolute top-[15px] bottom-[15px] left-0 w-[1px] bg-border dark:bg-dark-border"></div>