tailjng 0.1.6 → 0.1.7

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

@@ -1,45 +1,46 @@
-<div class="relative w-full flex items-center mb-2 select-none">
-    <progress
-        class="relative w-full overflow-hidden bg-slate-200 border border-border dark:border-dark-border
-            [&::-webkit-progress-bar]:bg-background
-            dark:[&::-webkit-progress-bar]:bg-dark-background
-            [&::-webkit-progress-value]:bg-primary
-            [&::-moz-progress-bar]:bg-primary
-            dark:[&::-webkit-progress-value]:bg-dark-primary
-            dark:[&::-moz-progress-bar]:bg-dark-primary
-            [&:disabled]:opacity-50 transition-all duration-300 ease-in-out"
-        [value]="value"
-        [max]="max"
-        [ngClass]="ngClasses"
-        [style.height.px]="height"
-        [style.opacity]="disabled ? 0.3 : 1"
+<div
+  class="j-progress-bar relative mb-2 w-full select-none"
+  [style.height.px]="height"
+>
+  <div
+    class="absolute inset-0 overflow-hidden border"
+    [ngClass]="trackClasses"
+    [style.border-radius.px]="borderRadius"
+  >
+    @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"
+        [style.width.%]="fillPercent"
         [style.border-radius.px]="borderRadius"
-    >
-    </progress>
+      ></div>
+    }
+  </div>
 
-    <div 
-      class="absolute flex top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-[35px] font-bold text-gray-500 dark:text-gray-400 progress-value-text"
-      style="-webkit-text-stroke: 0.8px white; -webkit-text-fill-color:black; width: max-content;"
-      [style.transform]="'scale(' + 0.5 + ')'"
-      [style.opacity]="disabled ? 0.3 : 1"
+  <div
+    class="j-progress-bar__label j-progress-bar__label--track pointer-events-none absolute inset-0 flex items-center justify-center overflow-hidden"
+    [style.border-radius.px]="borderRadius"
+    [style.opacity]="disabled ? 0.3 : 1"
+  >
+    <span
+      class="font-bold leading-none text-gray-500 dark:text-gray-400"
+      [style.font-size.px]="labelFontSize"
     >
-      @if (!disabled) {
-
-        @if (!showRange) {
-          {{ simbol }}{{ value }}
-        } @else {
-
-          @if (value === max) {
-            {{ simbol }}{{ value }}
-          } @else {
-            {{ simbol }}{{ value }} / {{ simbol }}{{ max }}
-          }
-
-        }
-      } @else {
-        SIN NOVEDAD
-      }
+      {{ labelText }}
+    </span>
+  </div>
 
+  @if (showFilledLabel) {
+    <div
+      class="j-progress-bar__label j-progress-bar__label--fill pointer-events-none absolute inset-0 flex items-center justify-center"
+      [style.clip-path]="fillClipPath"
+      [style.border-radius.px]="borderRadius"
+    >
+      <span
+        class="font-bold leading-none text-white dark:text-white"
+        [style.font-size.px]="labelFontSize"
+      >
+        {{ labelText }}
+      </span>
     </div>
-
-</div>
+  }
+</div>

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.css

@@ -2,3 +2,9 @@
   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

@@ -1,3 +1,4 @@
+<!-- Trigger -->
 <div class="relative w-full">
   <div #selectButton class="w-auto">
     <button
@@ -27,43 +28,46 @@
             (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>
+            <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 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
@@ -91,34 +95,38 @@
                 (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>
+                <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"
                 />
               }