tailjng 0.1.6 → 0.1.8

package/src/lib/components/viewer/viewer-pdf/pdf-viewer.component.ts

@@ -1,31 +1,184 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { NgClass } from '@angular/common';
+import {
+  Component,
+  HostListener,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
-import { CircleAlert, LucideAngularModule } from 'lucide-angular';
-import { JIconsService } from 'tailjng';
+import { Icons } from '../../.config/icons/icons.lucide';
+import { JButtonComponent } from '../../button/button.component';
+import { JIconComponent } from '../../icon/icon.component';
+import { PdfViewerMobileMode } from './pdf-viewer.types';
 
+export type { PdfViewerMobileMode } from './pdf-viewer.types';
+
+/**
+ * PDF viewer with desktop embed and a mobile-friendly open/download experience.
+ *
+ * Install: `npx tailjng add viewer-pdf`
+ */
 @Component({
   selector: 'JPdfViewer',
-  standalone: true,
-  imports: [LucideAngularModule],
+  imports: [NgClass, JButtonComponent, JIconComponent],
   templateUrl: './pdf-viewer.component.html',
-  styleUrls: ['./pdf-viewer.component.scss']
+  styleUrl: './pdf-viewer.component.css',
 })
-export class JPdfViewerComponent implements OnChanges {
+export class JPdfViewerComponent implements OnInit, OnChanges {
+  readonly Icons = Icons;
 
-  // URLs normales (strings) para usarlas en <a href="">
-  @Input() url = 'http://example/example.pdf';
+  @Input() url = '';
+  @Input() title = '';
+  @Input() emptyMessage = 'No hay un PDF para mostrar';
+  @Input() mobileMode: PdfViewerMobileMode = 'auto';
+  /** When true on mobile (non-iOS), tries an iframe embed before falling back to actions only. */
+  @Input() mobileEmbed = true;
+  @Input() ngClasses: Record<string, boolean> = {};
 
-  // URLs “seguras” para <object>
   safeUrl: SafeResourceUrl | null = null;
+  isMobileViewport = false;
+
+  constructor(private readonly sanitizer: DomSanitizer) {}
+
+  /**
+   * Whether the mobile layout should be used.
+   */
+  get useMobileLayout(): boolean {
+    if (this.mobileMode === 'embed') {
+      return false;
+    }
+
+    if (this.mobileMode === 'actions') {
+      return true;
+    }
+
+    return this.isMobileViewport;
+  }
+
+  /**
+   * iOS does not reliably render PDFs inside iframe/object.
+   */
+  get isIOS(): boolean {
+    if (typeof navigator === 'undefined') {
+      return false;
+    }
+
+    return (
+      /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+      (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
+    );
+  }
+
+  /**
+   * Whether to render the iframe on mobile (typically Android).
+   */
+  get showMobileEmbed(): boolean {
+    return this.useMobileLayout && this.mobileEmbed && !this.isIOS && !!this.safeUrl;
+  }
+
+  /**
+   * Whether to show the mobile action card (open / download).
+   */
+  get showMobileActions(): boolean {
+    return this.useMobileLayout && (!this.showMobileEmbed || this.isIOS);
+  }
+
+  /**
+   * Whether desktop embed mode is active.
+   */
+  get showDesktopEmbed(): boolean {
+    return !this.useMobileLayout && !!this.safeUrl;
+  }
+
+  /**
+   * Display name derived from the URL or `title` input.
+   */
+  get documentTitle(): string {
+    if (this.title.trim()) {
+      return this.title.trim();
+    }
+
+    if (!this.url) {
+      return 'Documento PDF';
+    }
+
+    try {
+      const path = new URL(this.url, window.location.origin).pathname;
+      const fileName = path.split('/').pop();
+      return fileName ? decodeURIComponent(fileName) : 'Documento PDF';
+    } catch {
+      return 'Documento PDF';
+    }
+  }
+
+  /**
+   * Whether a PDF URL is available.
+   */
+  get hasUrl(): boolean {
+    return !!this.url?.trim();
+  }
 
-  constructor(
-    public iconsService: JIconsService,
-    private sanitizer: DomSanitizer
-  ) { }
+  ngOnInit(): void {
+    this.syncViewport();
+  }
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['url']) {
-      this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
+      this.safeUrl = this.hasUrl
+        ? this.sanitizer.bypassSecurityTrustResourceUrl(this.buildEmbedUrl(this.url))
+        : null;
+    }
+  }
+
+  @HostListener('window:resize')
+  onWindowResize(): void {
+    this.syncViewport();
+  }
+
+  /**
+   * Opens the PDF in a new browser tab (native viewer on mobile).
+   */
+  openInBrowser(): void {
+    if (!this.hasUrl) {
+      return;
     }
+
+    window.open(this.url, '_blank', 'noopener,noreferrer');
+  }
+
+  /**
+   * Triggers download / open for the PDF file.
+   */
+  downloadPdf(): void {
+    if (!this.hasUrl) {
+      return;
+    }
+
+    const link = document.createElement('a');
+    link.href = this.url;
+    link.target = '_blank';
+    link.rel = 'noopener noreferrer';
+    link.download = this.documentTitle;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+
+  private syncViewport(): void {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    this.isMobileViewport = window.matchMedia('(max-width: 767px)').matches;
+  }
+
+  private buildEmbedUrl(rawUrl: string): string {
+    if (rawUrl.includes('#')) {
+      return rawUrl;
+    }
+
+    return `${rawUrl}#view=FitH`;
   }
 }

package/src/lib/components/viewer/viewer-pdf/pdf-viewer.types.ts

@@ -0,0 +1 @@
+export type PdfViewerMobileMode = 'auto' | 'embed' | 'actions';

package/src/styles.css

@@ -5,8 +5,8 @@
 }
 
 .scroll-element::-webkit-scrollbar {
-  width: 5px;
-  height: 5px
+  width: 8px;
+  height: 8px
 }
 
 .scroll-element::-webkit-scrollbar-track {

package/lib/services/static/icons.service.d.ts

@@ -1,65 +0,0 @@
-import * as i0 from "@angular/core";
-export declare class JIconsService {
-    icons: {
-        info: import("lucide-angular").LucideIconData;
-        success: import("lucide-angular").LucideIconData;
-        error: import("lucide-angular").LucideIconData;
-        warning: import("lucide-angular").LucideIconData;
-        question: import("lucide-angular").LucideIconData;
-        close: import("lucide-angular").LucideIconData;
-        check: import("lucide-angular").LucideIconData;
-        zoomIn: import("lucide-angular").LucideIconData;
-        zoomOut: import("lucide-angular").LucideIconData;
-        rotateRight: import("lucide-angular").LucideIconData;
-        rotateLeft: import("lucide-angular").LucideIconData;
-        reset: import("lucide-angular").LucideIconData;
-        fullscreen: import("lucide-angular").LucideIconData;
-        exitFullscreen: import("lucide-angular").LucideIconData;
-        img: import("lucide-angular").LucideIconData;
-        imgs: import("lucide-angular").LucideIconData;
-        imageOff: import("lucide-angular").LucideIconData;
-        upload: import("lucide-angular").LucideIconData;
-        view: import("lucide-angular").LucideIconData;
-        chevronUp: import("lucide-angular").LucideIconData;
-        chevronDown: import("lucide-angular").LucideIconData;
-        chevronsUpDown: import("lucide-angular").LucideIconData;
-        squareDashedMousePointer: import("lucide-angular").LucideIconData;
-        search: import("lucide-angular").LucideIconData;
-        copy: import("lucide-angular").LucideIconData;
-        save: import("lucide-angular").LucideIconData;
-        sun: import("lucide-angular").LucideIconData;
-        moon: import("lucide-angular").LucideIconData;
-        loading: import("lucide-angular").LucideIconData;
-        table: import("lucide-angular").LucideIconData;
-        listFilter: import("lucide-angular").LucideIconData;
-        firstPage: import("lucide-angular").LucideIconData;
-        prevPage: import("lucide-angular").LucideIconData;
-        nextPage: import("lucide-angular").LucideIconData;
-        lastPage: import("lucide-angular").LucideIconData;
-        arrowBigRight: import("lucide-angular").LucideIconData;
-        filter: import("lucide-angular").LucideIconData;
-        filterList: import("lucide-angular").LucideIconData;
-        eraser: import("lucide-angular").LucideIconData;
-        transh: import("lucide-angular").LucideIconData;
-        default: import("lucide-angular").LucideIconData;
-        fileSpreadsheet: import("lucide-angular").LucideIconData;
-        monitorUp: import("lucide-angular").LucideIconData;
-        download: import("lucide-angular").LucideIconData;
-        fileUp: import("lucide-angular").LucideIconData;
-        listRestart: import("lucide-angular").LucideIconData;
-        editRowLine: import("lucide-angular").LucideIconData;
-        editRow: import("lucide-angular").LucideIconData;
-        edit: import("lucide-angular").LucideIconData;
-        delete: import("lucide-angular").LucideIconData;
-        ellipsisVertical: import("lucide-angular").LucideIconData;
-        calendar: import("lucide-angular").LucideIconData;
-        clock: import("lucide-angular").LucideIconData;
-        circleAlert: import("lucide-angular").LucideIconData;
-        clipboard: import("lucide-angular").LucideIconData;
-        link: import("lucide-angular").LucideIconData;
-        linkOff: import("lucide-angular").LucideIconData;
-    };
-    constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<JIconsService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<JIconsService>;
-}

package/src/lib/components/colors-config/README.md

@@ -1,38 +0,0 @@
-# Colores Tailjng — configuración del proyecto
-
-Carpeta generada por `init:app`, `sync:app` o `npx tailjng add colors`.
-
-## Archivos
-
-| Archivo | Para qué |
-|---------|----------|
-| `colors.config.ts` | Variantes (`primary`, `success_soft`, …) + las tuyas (`brand`, etc.) |
-| `colors.safelist.css` | Clases Tailwind que el build debe generar (`@apply`) |
-
-## Añadir un color propio
-
-**1.** En `colors.config.ts`:
-
-```typescript
-brand: 'bg-indigo-600 text-white hover:bg-indigo-700 border border-indigo-500 shadow-md',
-brand_soft: 'bg-indigo-500/10 text-indigo-600 border border-indigo-500/20 shadow-sm',
-```
-
-**2.** En `colors.safelist.css`, dentro del bloque `@layer utilities`:
-
-```css
-.__tailjng_custom_colors__ {
-  @apply bg-indigo-600 text-white hover:bg-indigo-700 border-indigo-500 bg-indigo-500/10 text-indigo-600;
-}
-```
-
-**3.** Uso en componentes:
-
-```html
-<JButton classes="brand" text="Guardar" />
-<JBadge classes="brand_soft" value="N" />
-```
-
-## Provider
-
-`app.config.ts` debe incluir `tailjngColorsProvider` (lo añade `init:app` / `sync:app`).

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

@@ -1,12 +0,0 @@
-.menu-options-list,
-.menu-option-item {
-  width: 100%;
-  min-width: 100%;
-}
-
-:host ::ng-deep .menu-option-item j-button,
-:host ::ng-deep .menu-option-item jbutton {
-  display: flex;
-  width: 100%;
-  min-width: 0;
-}

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

@@ -1,51 +0,0 @@
-@if (internalOptions.length > 0) {
-    <div class="flex rounded-md overflow-hidden border border-border dark:border-dark-border text-sm min-h-[40px] select-none" [ngClass]="{ 'opacity-50': isDisabled || isComponentDisabled }" [class]="classes">
-        
-    <ng-container>
-            @for (opt of internalOptions; track $index) {
-                <button
-                type="button"
-                [disabled]="isDisabled || isComponentDisabled"
-                (click)="select(opt.value)"
-                [ngClass]="{
-                    'bg-primary dark:bg-dark-primary text-white': selectedValue === opt.value,
-                    'bg-background dark:bg-dark-background hover:bg-muted/80 hover:dark:bg-dark-muted/30 text-gray-700 dark:text-white': selectedValue !== opt.value,
-                    'cursor-not-allowed pointer-events-none': isDisabled || isComponentDisabled
-                }"
-                class="w-full py-2 px-4 font-medium border-r border-border last:border-none focus:outline-none transition-colors duration-200 ease-in-out cursor-pointer"
-                [class]="classesElement"
-                >
-                {{ opt.label }}
-                </button>
-            }
-        </ng-container>
-
-    </div>
-} @else if (isLoading) {
-
-    <div class="flex text-black dark:text-white gap-2 items-center justify-center rounded-md overflow-hidden border border-border dark:border-dark-border h-[40px]">
-        <lucide-icon [name]="iconsService.icons.loading" [size]="15" class="text-gray-400 animate-spin" />
-        <span>Cargando...</span>
-    </div>  
-
-} @else {
-
-    <div class="flex text-black dark:text-white items-center justify-center rounded-md overflow-hidden border border-border dark:border-dark-border h-[40px]">
-        No hay opciones
-    </div>  
-
-}
-  
-<!-- Clear button -->
-@if (showClear && selectedValue !== null) {
-    <div class="mt-2">
-        <button 
-        type="button" 
-        (click)="clear()" 
-        [disabled]="isDisabled || isComponentDisabled"
-        class="text-xs text-red-500 underline disabled:opacity-50 disabled:cursor-not-allowed">
-        Limpiar selección
-        </button>
-    </div>
-}
-  

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

@@ -1,222 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, forwardRef, Input, OnChanges, OnInit, Optional, Output, SimpleChanges } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { LucideAngularModule } from 'lucide-angular';
-import { JIconsService, JGenericCrudService } from 'tailjng';
-
-@Component({
-  selector: 'JToggleRadio',
-  imports: [LucideAngularModule, CommonModule],
-  templateUrl: './toggle-radio.component.html',
-  styleUrl: './toggle-radio.component.css',
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => JToggleRadioComponent),
-      multi: true,
-    },
-  ],
-})
-export class JToggleRadioComponent implements OnInit, OnChanges, ControlValueAccessor {
-
-  @Input() endpoint: string = '';
-
-  @Input() options: any[] = [];
-  @Input() optionLabel = 'label';
-  @Input() optionValue = 'value';
-
-  @Input() sort: 'ASC' | 'DESC' = 'ASC';
-  @Input() defaultFilters: { [key: string]: any } = {};
-
-  @Input() loadOnInit = false;
-  @Input() selectFirstOnLoad: boolean = false;
-
-  @Input() isDisabled: boolean = false;
-  @Input() showClear = false;
-
-  @Input() classes: string = '';
-  @Input() classesElement: string = '';
-
-  @Output() selectionChange = new EventEmitter<any>();
-
-  internalOptions: { value: any; label: string }[] = [];
-  selectedValue: any = null;
-  isLoading = false;
-
-  isComponentDisabled = false;
-
-  // ControlValueAccessor
-  onChange: any = () => { };
-  onTouched: any = () => { };
-
-  constructor(
-    public readonly iconsService: JIconsService,
-    @Optional() private readonly genericService: JGenericCrudService | null,
-  ) { }
-
-  ngOnInit(): void {
-    if (this.endpoint && this.loadOnInit) {
-      this.loadOptionsFromApi();
-    } else {
-      this.processOptions();
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['options'] && !this.endpoint) {
-      this.processOptions();
-    }
-  }
-
-
-
-  /**
-   * Set the disabled state of the component.
-   * This method is part of the ControlValueAccessor interface.
-   * @param isDisabled 
-   */
-  setDisabledState(isDisabled: boolean): void {
-    this.isComponentDisabled = isDisabled;
-  }
-
-
-
-  /**
-   * Load options from the API based on the endpoint and default filters.
-   * This method fetches data from the API and processes it to set the internal options.
-   */
-  loadOptionsFromApi() {
-    if (!this.genericService || !this.endpoint) return;
-
-    this.isLoading = true;
-
-    const params: any = {};
-    params['sortOrder'] = this.sort;
-
-    Object.keys(this.defaultFilters).forEach((key) => {
-      params[`filter[${key}]`] = this.defaultFilters[key];
-    });
-
-    this.genericService.findAll<any>({ endpoint: this.endpoint, params }).subscribe({
-      next: (res) => {
-        const data = res.data[this.endpoint] || [];
-        this.options = data;
-        this.processOptions();
-        this.isLoading = false;
-
-        // If selectFirstOnLoad is true, select the first element
-        if (this.selectFirstOnLoad && this.internalOptions.length > 0) {
-          this.selectedValue = this.internalOptions[0].value;
-          this.onChange(this.selectedValue);
-          this.selectionChange.emit(this.selectedValue);
-        }
-      },
-      error: () => (this.isLoading = false),
-    });
-  }
-
-
-
-  /**
-   * Get a nested value from an object using a dot-separated path.
-   * @param obj The object to search.
-   * @param path The dot-separated path to the desired value.
-   * @returns The value found at the specified path, or an empty string if not found.
-   */
-  getNestedValue(obj: any, path: string): any {
-    return path.split('.').reduce((acc, part) => acc && acc[part], obj) ?? '';
-  }
-
-
-
-  /**
-   * Process the options to extract value and label.
-   * This method checks if the options are objects and extracts the specified value and label.
-   */
-  processOptions() {
-    if (this.options.length > 0 && typeof this.options[0] === 'object') {
-
-      this.internalOptions = this.options.map((opt) => ({
-        value: opt[this.optionValue],
-        label: this.getNestedValue(opt, this.optionLabel),
-      }));
-
-    } else {
-      this.internalOptions = this.options.map((opt) => ({
-        value: opt,
-        label: opt.toString(),
-      }));
-    }
-  }
-
-
-
-  /**
-   * Select an option.
-   * @param value The value of the option to select.
-   * @returns 
-   */
-  select(value: any) {
-    if (this.isDisabled || this.isComponentDisabled) return;
-    this.selectedValue = value;
-    this.onChange(this.selectedValue);
-    this.selectionChange.emit(this.selectedValue);
-  }
-
-
-
-  /**
-   * Clear the selected value.
-   */
-  clear() {
-    this.selectedValue = null;
-    this.onChange(null);
-    this.selectionChange.emit(null);
-  }
-
-
-
-  /**
-   * Write the value to the component.
-   * This method is part of the ControlValueAccessor interface.
-   * It updates the selected value and notifies the change.
-   * @param value The value to write.
-   */
-  writeValue(value: any): void {
-    this.selectedValue = value;
-  }
-
-
-
-  /**
-   * Register a callback function to be called when the value changes.
-   * This method is part of the ControlValueAccessor interface.
-   * @param fn 
-   */
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-
-
-  /**
-   * Register a callback function to be called when the control is touched.
-   * This method is part of the ControlValueAccessor interface.
-   * @param fn The callback function to register.
-   */
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  
-
-  /**
-   * Reload the options based on the current filters.
-   * This method can be called to refresh the options displayed in the toggle radio component.
-   */
-  reloadOptions() {
-    if (!this.genericService) return;
-    this.loadOptionsFromApi();
-  }
-
-}