tailjng 0.1.6 → 0.1.7

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

@@ -1,3 +1,6 @@
+export * from './complete-crud-table.animations';
+export * from './complete-crud-table.types';
+export * from './complete-crud-table.util';
 export * from './expand-grid/table-expand-grid.builder';
 export * from './expand-grid/table-expand-grid.helper';
 export * from './expand-grid/table-expand-grid.types';

package/src/lib/components/theme-generator/theme-generator.component.css

@@ -0,0 +1,21 @@
+@keyframes theme-save-pop {
+  0% {
+    transform: scale(1);
+    box-shadow: none;
+  }
+
+  35% {
+    transform: scale(1.35);
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 40%, transparent);
+  }
+
+  100% {
+    transform: scale(1);
+    box-shadow: none;
+  }
+}
+
+:host ::ng-deep button.theme-save-applied {
+  animation: theme-save-pop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
+  color: var(--color-primary);
+}

package/src/lib/components/theme-generator/theme-generator.component.html

@@ -1,123 +1,153 @@
 <main class="container mx-auto">
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-
-        <!-- Controls Panel -->
-        <div class="space-y-8 select-none">
-
-            <div>
-                <h2 class="text-sm font-bold mb-1 opacity-60">Selector de color</h2>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    
-                    <!-- Color Picker -->
-                    <div class="relative h-64 w-full overflow-hidden rounded-lg border border-border dark:border-dark-border">
-                        <div class="absolute inset-0 bg-gradient-to-br from-white to-transparent" style="z-index: 1;"></div>
-                        <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black" style="z-index: 2;"></div>
-                        <div class="absolute inset-0" [style.background]="'linear-gradient(to right, hsl(' + huePosition + ', 0%, 50%), hsl(' + huePosition + ', 100%, 50%))'" style="z-index: 0;"></div>
-                        <div class="absolute w-6 h-6 rounded-full border-2 border-white transform -translate-x-1/2 -translate-y-1/2 cursor-pointer" [style.left.%]="colorPickerPosition.x" [style.top.%]="colorPickerPosition.y" style="z-index: 3;"></div>
-                        <div class="absolute inset-0 cursor-pointer" (mousedown)="startColorPicking($event)" (mousemove)="updateColorPicking($event)" (mouseup)="stopColorPicking()" (mouseleave)="stopColorPicking()" style="z-index: 4;"></div>
-                    </div>
-
-                    <!-- Color Spectrum -->
-                    <div class="space-y-4">
-                        <div class="relative">
-
-                            <!-- Picker bar -->
-                            <div class="h-8 w-full rounded-lg overflow-hidden border border-border dark:border-dark-border relative">
-                                <div class="absolute inset-0" [style.background]="hueGradient"></div>
-                                
-                                <input 
-                                    type="range" 
-                                    min="0" 
-                                    max="360" 
-                                    [value]="huePosition"
-                                    (input)="updateHueFromInput($event)"
-                                    class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" 
-                                />
-                            </div>
-                          
-                             <!-- Ball outside the flow to stand out -->
-                            <div class="absolute top-1/2 transform -translate-y-1/2 -translate-x-1/2 w-9 h-9 rounded-full border-2 border-white z-10 pointer-events-none"
-                                 [style.left.%]="(huePosition / 360) * 100"
-                                 [style.backgroundColor]="hslToHex(huePosition, 100, 50)">
-                            </div>
-                          
-                        </div>
-                        
-
-                        <!-- Hex Input -->
-                        <JFormContainer>
-                            <JFormContainer>
-                                <JLabel for="baseColor" classes="opacity-60">Ingresa un valor Hex</JLabel>
-
-                                <JFormContainer [rows]="true">
-
-                                    <JFormContainer class="flex-1">
-                                        <JInput 
-                                            id="baseColor" 
-                                            type="text" 
-                                            [(ngModel)]="baseColor"
-                                            (input)="updateFromHexInput()" 
-                                            placeholder="#000000" 
-                                        />
-                                    </JFormContainer>
-
-                                    <!-- Color Preview -->
-                                    <div class="h-[35px] w-[60px] rounded shadow-md" [style.background-color]="baseColor"></div>
-
-                                </JFormContainer>
-                            </JFormContainer>
-
-                            <!-- Saturation Slider -->
-                            <JRangeInput 
-                                [min]="0" 
-                                [max]="100" 
-                                [(ngModel)]="saturation"
-                                (input)="generateTheme()" 
-                                placeholder="Saturación" 
-                                [isLabel]="true" 
-                                simbol="%" 
-                            />
-
-                            <!-- Lightness Slider -->
-                            <JRangeInput 
-                                [min]="0" 
-                                [max]="100" 
-                                [(ngModel)]="lightness" 
-                                (input)="generateTheme()"
-                                placeholder="Luminosidad" 
-                                [isLabel]="true" 
-                                simbol="%" 
-                            />
-
-                        </JFormContainer>
-
-                    </div>
-                </div>
-
-            </div>
-        </div>
-
-        <!-- Code Preview -->
-        <div class="relative">
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+    <!-- Controls Panel -->
+    <div class="space-y-8 select-none">
+      <div>
+        <h2 class="text-sm font-bold mb-1 opacity-60">Selector de color</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <!-- Color Picker -->
+          <div
+            class="relative h-64 w-full overflow-hidden rounded-lg border border-border dark:border-dark-border"
+          >
             <div
-                class="h-70 bg-background dark:bg-dark-background text-black dark:text-white overflow-auto rounded-lg font-mono text-sm whitespace-pre-wrap border border-border dark:border-dark-border scroll-element">
-                <div class="p-4">
-                    <span>{{ themeCode }}</span>
-                </div>
-            </div>
-
-            <div class="absolute top-4 right-4">
-                <JButton 
-                    (clicked)="copyThemeToClipboard()" 
-                    [icon]="iconsService.icons.copy" 
-                    [iconChange]="iconsService.icons.check"
-                    [isChangeIcon]="copied" 
-                    [iconSize]="15" 
-                    tooltip="Copiar" 
-                    classes="w-[25px] h-[25px]" 
+              class="absolute inset-0 bg-gradient-to-br from-white to-transparent"
+              style="z-index: 1"
+            ></div>
+            <div
+              class="absolute inset-0 bg-gradient-to-b from-transparent to-black"
+              style="z-index: 2"
+            ></div>
+            <div
+              class="absolute inset-0"
+              [style.background]="
+                'linear-gradient(to right, hsl(' +
+                huePosition +
+                ', 0%, 50%), hsl(' +
+                huePosition +
+                ', 100%, 50%))'
+              "
+              style="z-index: 0"
+            ></div>
+            <div
+              class="absolute w-6 h-6 rounded-full border-2 border-white transform -translate-x-1/2 -translate-y-1/2 cursor-pointer"
+              [style.left.%]="colorPickerPosition.x"
+              [style.top.%]="colorPickerPosition.y"
+              style="z-index: 3"
+            ></div>
+            <div
+              class="absolute inset-0 cursor-pointer"
+              (mousedown)="startColorPicking($event)"
+              (mousemove)="updateColorPicking($event)"
+              (mouseup)="stopColorPicking()"
+              (mouseleave)="stopColorPicking()"
+              style="z-index: 4"
+            ></div>
+          </div>
+
+          <!-- Color Spectrum -->
+          <div class="space-y-4">
+            <div class="relative">
+              <!-- Picker bar -->
+              <div
+                class="h-8 w-full rounded-lg overflow-hidden border border-border dark:border-dark-border relative"
+              >
+                <div
+                  class="absolute inset-0"
+                  [style.background]="hueGradient"
+                ></div>
+
+                <input
+                  type="range"
+                  min="0"
+                  max="360"
+                  [value]="huePosition"
+                  (input)="updateHueFromInput($event)"
+                  class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
                 />
+              </div>
+
+              <!-- Ball outside the flow to stand out -->
+              <div
+                class="absolute top-1/2 transform -translate-y-1/2 -translate-x-1/2 w-9 h-9 rounded-full border-2 border-white z-10 pointer-events-none"
+                [style.left.%]="(huePosition / 360) * 100"
+                [style.backgroundColor]="hslToHex(huePosition, 100, 50)"
+              ></div>
             </div>
+
+            <!-- Hex Input -->
+            <JFormContainer>
+              <JFormContainer>
+                <JLabel for="baseColor" classes="opacity-60"
+                  >Ingresa un valor Hex</JLabel
+                >
+
+                <JFormContainer [rows]="true" [gap]="3">
+                  <JFormContainer class="flex-1">
+                    <JInput
+                      id="baseColor"
+                      type="text"
+                      [(ngModel)]="baseColor"
+                      (input)="updateFromHexInput()"
+                      placeholder="#000000"
+                    />
+                  </JFormContainer>
+
+                  <!-- Color Preview -->
+                  <div
+                    class="h-[35px] w-[60px] rounded shadow-md"
+                    [style.background-color]="baseColor"
+                  ></div>
+                </JFormContainer>
+              </JFormContainer>
+
+              <!-- Saturation Slider -->
+              <JRangeInput
+                [min]="0"
+                [max]="100"
+                [(ngModel)]="saturation"
+                (input)="generateTheme()"
+                placeholder="Saturación"
+                [isLabel]="true"
+                simbol="%"
+              />
+
+              <!-- Lightness Slider -->
+              <JRangeInput
+                [min]="0"
+                [max]="100"
+                [(ngModel)]="lightness"
+                (input)="generateTheme()"
+                placeholder="Luminosidad"
+                [isLabel]="true"
+                simbol="%"
+              />
+            </JFormContainer>
+          </div>
         </div>
+      </div>
+    </div>
 
+    <!-- Code Preview -->
+    <div class="relative">
+      <div
+        class="h-70 bg-background dark:bg-dark-background text-black dark:text-white overflow-auto rounded-lg font-mono text-sm whitespace-pre-wrap border border-border dark:border-dark-border scroll-element"
+      >
+        <div class="p-4">
+          <span>{{ themeCode }}</span>
+        </div>
+      </div>
+
+      <div class="absolute top-4 right-4 flex gap-1">
+        <JButton
+          (clicked)="copyThemeToClipboard()"
+          [icon]="Icons.Copy"
+          [iconChange]="Icons.Check"
+          [isChangeIcon]="copied"
+          [iconSize]="15"
+          tooltip="Copiar"
+          classes="w-[25px] h-[25px]"
+        />
+      </div>
     </div>
-</main>
+  </div>
+</main>

package/src/lib/components/theme-generator/theme-generator.component.ts

@@ -1,20 +1,20 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy, OnInit, effect } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { LucideAngularModule } from 'lucide-angular';
 import { JInputComponent } from '../input/input/input.component';
 import { JRangeInputComponent } from '../input/input-range/range-input.component';
 import { JButtonComponent } from '../button/button.component';
 import { JLabelComponent } from '../label/label.component';
-import { ColorPosition, GeneratedColors, JIconsService, JThemeService, ThemeMode } from 'tailjng';
+import { ColorPosition, GeneratedColors, JThemeService, ThemeMode, applyGeneratedColorsToDocument, clearGeneratedColorsFromDocument } from 'tailjng';
 import { JFormContainerComponent } from '../form/form-container/container-form.component';
+import { Icons } from '../.config/icons/icons.lucide';
 
 @Component({
   selector: 'JThemeGenerator',
-  imports: [LucideAngularModule, JInputComponent, JRangeInputComponent, JButtonComponent, FormsModule, JLabelComponent, JFormContainerComponent],
+  imports: [JInputComponent, JRangeInputComponent, JButtonComponent, FormsModule, JLabelComponent, JFormContainerComponent],
   templateUrl: './theme-generator.component.html',
-  styleUrl: './theme-generator.component.css'
 })
-export class JThemeGeneratorComponent {
+export class JThemeGeneratorComponent implements OnInit, OnDestroy {
+  readonly Icons = Icons;
 
   // Color picker state
   baseColor: string = '#415884';
@@ -48,22 +48,27 @@ export class JThemeGeneratorComponent {
   }
 
   constructor(
-    public readonly iconsService: JIconsService,
     public readonly themeService: JThemeService
-  ) { }
+  ) {
+    effect(() => {
+      this.themeService.themeSignal();
+      if (this.generatedColors) {
+        this.applyColorsToApp(this.generatedColors);
+      }
+    });
+  }
 
-  ngOnInit() {
-    this.syncFromHSL();
+  ngOnDestroy(): void {
+    if (typeof this.themeService.clearPreviewColors === 'function') {
+      this.themeService.clearPreviewColors();
+      return;
+    }
 
-    // Asynchronously check for theme changes every 300ms
-    setInterval(() => {
-      const current = localStorage.getItem('theme') as ThemeMode;
-      if (current && current !== this.lastTheme) {
-        this.previewMode = current;
-        this.lastTheme = current;
-        this.generateTheme();
-      }
-    }, 300);
+    clearGeneratedColorsFromDocument();
+  }
+
+  ngOnInit() {
+    this.syncFromHSL(false);
   }
 
 
@@ -179,9 +184,9 @@ export class JThemeGeneratorComponent {
   /**
    * Sync the internal state from HSL values.
    */
-  syncFromHSL(): void {
+  syncFromHSL(applyToApp = true): void {
     this.baseColor = this.hslToHex(this.huePosition, this.saturation, this.lightness);
-    this.generateTheme();
+    this.generateTheme(applyToApp);
   }
 
 
@@ -251,7 +256,7 @@ export class JThemeGeneratorComponent {
   /**
    * Generate the theme colors.
    */
-  generateTheme(): void {
+  generateTheme(applyToApp = true): void {
     this.baseColor = this.hslToHex(this.huePosition, this.saturation * 0.9, this.lightness);
 
     const vars = this.generatedColors = {
@@ -298,8 +303,7 @@ export class JThemeGeneratorComponent {
       darkDestructiveForeground: this.hslToHex(this.huePosition, this.saturation * 0.2, 90),
       darkBorder: this.hslToHex(this.huePosition, this.saturation * 0.5, 45),
       darkInput: this.hslToHex(this.huePosition, this.saturation * 0.5, 45),
-      darkRing: this.hslToHex(this.huePosition, this.saturation * 0.7, 28),
-    };
+      darkRing: this.hslToHex(this.huePosition, this.saturation * 0.7, 28)};
 
     const toCssVar = (key: string, value: string) =>
       `  --color-${key.replace(/[A-Z]/g, m => '-' + m.toLowerCase())}: ${value};`;
@@ -320,8 +324,24 @@ export class JThemeGeneratorComponent {
     lines.push(`  --color-dark-radius: 0.5rem;`);
 
     this.themeCode = `@theme {\n${lines.join('\n')}\n}`;
+
+    if (applyToApp) {
+      this.applyColorsToApp(vars);
+    }
   }
 
+  /**
+   * Applies palette CSS variables to the whole app.
+   * @param colors Generated palette.
+   */
+  private applyColorsToApp(colors: GeneratedColors): void {
+    if (typeof this.themeService.applyPreviewColors === 'function') {
+      this.themeService.applyPreviewColors(colors);
+      return;
+    }
+
+    applyGeneratedColorsToDocument(colors);
+  }
 
   copyThemeToClipboard(): void {
     navigator.clipboard.writeText(this.themeCode);

package/src/lib/components/toggle-radio/shared/toggle-options.types.ts

@@ -0,0 +1,8 @@
+export type ToggleOption<T = unknown> = {
+  value: T;
+  label: string;
+};
+
+export type ToggleSortOrder = 'ASC' | 'DESC';
+
+export type ToggleRadioLayout = 'vertical' | 'horizontal';

package/src/lib/components/toggle-radio/shared/toggle-options.util.ts

@@ -0,0 +1,44 @@
+import { ToggleOption } from './toggle-options.types';
+
+/**
+ * Reads a nested property using dot notation.
+ */
+export function getNestedToggleValue(obj: unknown, path: string): string {
+  if (!obj || typeof obj !== 'object') {
+    return '';
+  }
+
+  const value = path.split('.').reduce<unknown>((acc, part) => {
+    if (acc && typeof acc === 'object' && part in (acc as Record<string, unknown>)) {
+      return (acc as Record<string, unknown>)[part];
+    }
+    return undefined;
+  }, obj);
+
+  return value == null ? '' : String(value);
+}
+
+/**
+ * Normalizes static options into `{ value, label }` pairs.
+ */
+export function normalizeToggleOptions(
+  options: unknown[],
+  optionLabel: string,
+  optionValue: string,
+): ToggleOption[] {
+  if (!options.length) {
+    return [];
+  }
+
+  if (typeof options[0] === 'object' && options[0] !== null) {
+    return options.map((opt) => ({
+      value: (opt as Record<string, unknown>)[optionValue],
+      label: getNestedToggleValue(opt, optionLabel),
+    }));
+  }
+
+  return options.map((opt) => ({
+    value: opt,
+    label: String(opt),
+  }));
+}

package/src/lib/components/toggle-radio/toggle-radio/toggle-radio.component.css

@@ -0,0 +1,135 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.j-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+
+.j-radio-group--horizontal {
+  flex-flow: row wrap;
+  gap: 1rem 1.25rem;
+}
+
+.j-radio-group--disabled {
+  opacity: 0.55;
+}
+
+.j-radio-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.j-radio-option--disabled {
+  cursor: not-allowed;
+}
+
+.j-radio-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  pointer-events: none;
+}
+
+.j-radio-input:focus-visible + .j-radio-indicator {
+  outline: 2px solid var(--color-ring);
+  outline-offset: 2px;
+}
+
+.j-radio-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  flex-shrink: 0;
+  border: 1.5px solid var(--color-border);
+  border-radius: 9999px;
+  background-color: var(--color-background);
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease;
+}
+
+:host-context(.dark) .j-radio-indicator,
+:host-context(html.dark) .j-radio-indicator {
+  border-color: var(--color-dark-border);
+  background-color: var(--color-dark-background);
+}
+
+.j-radio-dot {
+  width: 0.4375rem;
+  height: 0.4375rem;
+  border-radius: 9999px;
+  background-color: var(--color-primary);
+  transform: scale(0);
+  transition: transform 0.15s ease;
+}
+
+:host-context(.dark) .j-radio-dot,
+:host-context(html.dark) .j-radio-dot {
+  background-color: var(--color-dark-primary);
+}
+
+.j-radio-option--selected .j-radio-indicator {
+  border-color: var(--color-primary);
+}
+
+:host-context(.dark) .j-radio-option--selected .j-radio-indicator,
+:host-context(html.dark) .j-radio-option--selected .j-radio-indicator {
+  border-color: var(--color-dark-primary);
+}
+
+.j-radio-option--selected .j-radio-dot {
+  transform: scale(1);
+}
+
+.j-radio-label {
+  font-size: 0.875rem;
+  line-height: 1.35;
+  color: var(--color-foreground);
+}
+
+:host-context(.dark) .j-radio-label,
+:host-context(html.dark) .j-radio-label {
+  color: var(--color-dark-foreground);
+}
+
+.j-radio-state {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.5rem;
+  min-height: 2rem;
+  color: var(--color-muted-foreground);
+  font-size: 0.875rem;
+}
+
+:host-context(.dark) .j-radio-state,
+:host-context(html.dark) .j-radio-state {
+  color: var(--color-dark-muted-foreground);
+}
+
+.j-radio-clear {
+  margin-top: 0.625rem;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--color-destructive);
+  font-size: 0.75rem;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.j-radio-clear:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/src/lib/components/toggle-radio/toggle-radio/toggle-radio.component.html

@@ -0,0 +1,52 @@
+@if (internalOptions.length > 0) {
+  <div [ngClass]="groupClasses" role="radiogroup">
+    @for (opt of internalOptions; track $index) {
+      <label
+        class="j-radio-option"
+        [class.j-radio-option--selected]="isSelected(opt.value)"
+        [class.j-radio-option--disabled]="isInteractionDisabled"
+        [for]="optionId(opt.value, $index)"
+      >
+        <input
+          class="j-radio-input"
+          type="radio"
+          [id]="optionId(opt.value, $index)"
+          [name]="name"
+          [value]="opt.value"
+          [checked]="isSelected(opt.value)"
+          [disabled]="isInteractionDisabled"
+          (change)="select(opt.value)"
+        />
+
+        <span class="j-radio-indicator" aria-hidden="true">
+          <span class="j-radio-dot"></span>
+        </span>
+
+        <span class="j-radio-label">{{ opt.label }}</span>
+      </label>
+    }
+  </div>
+} @else if (isLoading) {
+  <div class="j-radio-state">
+    <JIcon
+      [icon]="Icons.Loader2"
+      [size]="16"
+      iconClass="animate-spin text-muted-foreground"
+      [ariaHidden]="true"
+    />
+    <span>Cargando...</span>
+  </div>
+} @else {
+  <div class="j-radio-state">No hay opciones</div>
+}
+
+@if (showClear && selectedValue !== null) {
+  <button
+    type="button"
+    class="j-radio-clear"
+    (click)="clear()"
+    [disabled]="isInteractionDisabled"
+  >
+    Limpiar selección
+  </button>
+}