tailjng 0.1.6 → 0.1.8

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

@@ -1,21 +1,105 @@
-import { Component, Input } from '@angular/core';
 import { NgClass } from '@angular/common';
+import { Component, Input } from '@angular/core';
 
+export type { ProgressBarState } from './progress-bar.types';
+
+/**
+ * Progress bar with centered label that adapts contrast over fill and track.
+ *
+ * Install: `npx tailjng add progress-bar`
+ */
 @Component({
   selector: 'JProgressBar',
   imports: [NgClass],
   templateUrl: './progress-bar.component.html',
-  styleUrl: './progress-bar.component.css'
+  styleUrl: './progress-bar.component.css',
 })
 export class JProgressBarComponent {
+  @Input() value = 0;
+  @Input() max = 100;
+
+  /** Unit prefix/suffix for values (e.g. "%"). Alias `simbol` kept for backward compatibility. */
+  @Input({ alias: 'simbol' }) symbol = '%';
+
+  @Input() disabled = false;
+
+  // Show "value / max" instead of value only (when value !== max)
+  @Input() showRange = false;
+
+  @Input() height = 30;
+  @Input() borderRadius = 50;
+
+  // Extra conditional classes on the track container
+  @Input() ngClasses: Record<string, boolean> = {};
+
+  /**
+   * Fill percentage clamped between 0 and 100.
+   * @returns Progress ratio as a percentage.
+   */
+  get fillPercent(): number {
+    if (this.max <= 0) {
+      return 0;
+    }
+    return Math.min(100, Math.max(0, (this.value / this.max) * 100));
+  }
+
+  /**
+   * Label font size scaled to bar height so text stays inside thin bars.
+   * @returns Font size in pixels.
+   */
+  get labelFontSize(): number {
+    return Math.max(8, Math.min(Math.round(this.height * 0.45), 16));
+  }
+
+  /**
+   * Clip path revealing only the filled portion for the contrast overlay label.
+   * @returns CSS `clip-path` inset value.
+   */
+  get fillClipPath(): string {
+    const insetRight = 100 - this.fillPercent;
+    return `inset(0 ${insetRight}% 0 0 round ${this.borderRadius}px)`;
+  }
+
+  /**
+   * Centered label text.
+   * @returns Formatted progress label.
+   */
+  get labelText(): string {
+    if (this.disabled) {
+      return 'SIN NOVEDAD';
+    }
+
+    if (!this.showRange || this.value === this.max) {
+      return `${this.value}${this.symbol}`;
+    }
+
+    return `${this.value}${this.symbol} / ${this.max}${this.symbol}`;
+  }
 
-  @Input() value: number = 0;
-  @Input() max: number = 100;
-  @Input() simbol: string = '%';
-  @Input() disabled: boolean = false;
-  @Input() showRange: boolean = false;
+  /**
+   * Whether the high-contrast overlay label should render.
+   * @returns `true` when enabled and the bar has visible fill.
+   */
+  get showFilledLabel(): boolean {
+    return !this.disabled && this.fillPercent > 0;
+  }
 
-  @Input() height: number = 30;
-  @Input() borderRadius: number = 50;
-  @Input() ngClasses: string[] = [];
-}
+  /**
+   * Class map for the track shell.
+   * @returns Track border, background, and transition utilities.
+   */
+  get trackClasses(): Record<string, boolean> {
+    return {
+      'j-progress-bar__track': true,
+      'border-border': true,
+      'dark:border-dark-border': true,
+      'bg-background': true,
+      'dark:bg-dark-background': true,
+      'transition-all': true,
+      'duration-300': true,
+      'ease-in-out': true,
+      ...this.ngClasses,
+      'opacity-30': this.disabled,
+    };
+  }
+}

package/src/lib/components/progress-bar/progress-bar.types.ts

@@ -0,0 +1,2 @@
+/** Visual state of {@link JProgressBarComponent}. */
+export type ProgressBarState = 'default' | 'disabled';

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

@@ -1,3 +1,4 @@
+<!-- Trigger -->
 <div class="relative w-full">
   <div #selectButton class="w-auto">
     <button
@@ -25,45 +26,48 @@
           <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"
           >
-            <lucide-icon
-              [name]="iconsService.icons.close"
-              size="14"
-            ></lucide-icon>
+            <JIcon
+              [icon]="Icons.X"
+              [size]="14"
+              iconClass="text-gray-400"
+              [ariaHidden]="true"
+            />
           </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>
+          <JIcon
+            [icon]="Icons.ChevronDown"
+            [size]="16"
+            iconClass="transition duration-300 ease-in-out text-gray-400"
+            [ngClasses]="{ 'rotate-180': isColumnSelectorOpen }"
+            [ariaHidden]="true"
+          />
         } @else {
-          <lucide-icon
-            [name]="iconsService.icons.loading"
-            size="16"
-            class="text-gray-400 animate-spin"
-          ></lucide-icon>
+          <JIcon
+            [icon]="Icons.Loader2"
+            [size]="16"
+            iconClass="text-gray-400 animate-spin"
+            [ariaHidden]="true"
+          />
         }
       </div>
     </button>
   </div>
 </div>
 
-<!-- Dropdown positioned outside the flow -->
+<!-- Floating panel (position: fixed — see dropdown-select.util) -->
 @if (isColumnSelectorOpen) {
   <div
+    #dropdownPanel
     @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' +
+      '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
     "
     [style.width.px]="dropdownWidth"
-    [style.top.px]="dropdownTop"
-    [style.left.px]="dropdownLeft"
     [ngClass]="getButtonNgClass()"
   >
     <div class="pt-1 pl-3 pr-3 pb-3">
@@ -73,7 +77,7 @@
         {{ title }}
       </div>
 
-      <!-- Search -->
+      <!-- Searchable API filter -->
       @if (type === "searchable" && isSearch) {
         <div class="mb-2 relative">
           <input
@@ -89,36 +93,40 @@
               <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"
               >
-                <lucide-icon
-                  [name]="iconsService.icons.close"
-                  size="16"
-                ></lucide-icon>
+                <JIcon
+                  [icon]="Icons.X"
+                  [size]="16"
+                  iconClass="text-gray-400"
+                  [ariaHidden]="true"
+                />
               </button>
             }
-            <lucide-icon
-              [name]="iconsService.icons.search"
-              size="16"
-              class="text-gray-400"
-            ></lucide-icon>
+            <JIcon
+              [icon]="Icons.Search"
+              [size]="16"
+              iconClass="text-gray-400"
+              [ariaHidden]="true"
+            />
           </div>
         </div>
       }
 
-      <!-- Dropdown -->
+      <!-- Option list -->
       <div
-        class="max-h-45 max-[400px]:max-h-38 overflow-x-hidden overflow-y-auto flex flex-col gap-1 scroll-element"
+        class="jdropdown-options-list 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>
+            <JIcon
+              [icon]="Icons.Loader2"
+              [size]="20"
+              iconClass="animate-spin"
+              [ariaHidden]="true"
+            />
             Cargando...
           </div>
         } @else {
@@ -134,16 +142,18 @@
               }"
             >
               @if (selectedValue === option.value) {
-                <lucide-icon
-                  [name]="iconsService.icons.check"
-                  size="15"
-                  class="transition text-black dark:text-white"
+                <JIcon
+                  [icon]="Icons.Check"
+                  [size]="15"
+                  iconClass="transition text-black dark:text-white"
+                  [ariaHidden]="true"
                 />
               } @else {
-                <lucide-icon
-                  [name]="iconsService.icons.squareDashedMousePointer"
-                  size="15"
-                  class="transition text-black dark:text-white opacity-40"
+                <JIcon
+                  [icon]="Icons.SquareDashedMousePointer"
+                  [size]="15"
+                  iconClass="transition text-black dark:text-white opacity-40"
+                  [ariaHidden]="true"
                 />
               }