⚡ devless-angular

Librería de componentes UI de grado producción para Angular 22+, diseñada bajo principios de soberanía técnica: 100% componentes standalone, soporte nativo para Signals, sistema de tokens CSS puros (sin dependencias de Tailwind ni Bootstrap) y modo oscuro/claro de alto contraste.

🚀 ¿Por qué devless-angular v1.0?

La versión 1.0.0 representa un salto generacional completo frente a la serie histórica 0.2.x:

• 🚫 Cero dependencias CSS pesadas: No requiere configurar Tailwind, PostCSS ni cargar hojas de estilo de Bootstrap de 300KB.
• 🧩 100% Standalone y Tree-shakeable: Importa únicamente el componente que utilizas (DlButtonComponent, DlTableComponent), minimizando el bundle final.
• 🎨 Sistema de Tokens CSS --dl-* nativo: Modos oscuro y claro reactivos listos para producción con soporte para fuentes tipográficas Plus Jakarta Sans e Inter.
• 📱 Mobile-First & Touch-Ready: Componentes dedicados para dispositivos móviles (dl-drawer, dl-footer-bar) con soporte táctil.
• 📦 Estructura Arquitectónica en 5 Niveles: Desde elementos atómicos simples hasta aplicaciones de shell completas y módulos especializados (TCG, Kanban, Markdown).

📦 Instalación

npm install devless-angular

Importar los estilos globales

Agrega el archivo de estilos en tu angular.json o impórtalo directamente en tu styles.css global:

En angular.json:

"styles": [
  "node_modules/devless-angular/src/lib/styles.css",
  "src/styles.css"
]

O en src/styles.css:

@import "devless-angular/src/lib/styles.css";

🛠️ Guía de Uso

1. Uso Standalone (Recomendado)

En tus componentes standalone de Angular 22+, importa directamente lo que necesitas:

import { Component, inject } from '@angular/core';
import { 
  DlButtonComponent, 
  DlCardComponent, 
  DlBadgeComponent,
  DlToastService 
} from 'devless-angular';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [DlButtonComponent, DlCardComponent, DlBadgeComponent],
  template: `
    <dl-card title="Resumen Ejecutivo">
      <div class="content">
        <p>Estado del sistema: <dl-badge variant="success">Operativo</dl-badge></p>
        <dl-button variant="primary" (click)="notificar()">
          Ejecutar Proceso
        </dl-button>
      </div>
    </dl-card>
  `
})
export class DashboardComponent {
  private toast = inject(DlToastService);

  notificar() {
    this.toast.show({
      type: 'success',
      title: 'Completado',
      message: 'Operación ejecutada con éxito'
    });
  }
}

2. Uso con NgModule (Compatibilidad Legada)

Si tu aplicación utiliza módulos clásicos, puedes importar la suite completa:

import { NgModule } from '@angular/core';
import { DevlessAngularModule } from 'devless-angular';

@NgModule({
  imports: [
    DevlessAngularModule
  ]
})
export class AppModule { }

🏛️ Arquitectura de 5 Niveles (40+ Componentes)

La librería organiza sus componentes en una jerarquía estricta basada en complejidad y responsabilidad:

Nivel 1: Basics (Componentes Atómicos)

Elementos de interfaz unitarios, rápidos y de máxima legibilidad:

• <dl-button>: Botones con variantes (primary, secondary, danger, ghost, etc.), tamaños y estados de carga.
• <dl-icon>: Renderizador de íconos vectoriales optimizados.
• <dl-badge>: Indicadores de estado y etiquetas semánticas.
• <dl-skeleton>: Placeholders con animación shimmer para estados de carga.
• <dl-avatar> / <dl-avatar-group>: Avatares individuales y apilados con iniciales o imágenes.
• <dl-tabs>: Navegación por pestañas fluida y accesible.
• <dl-switch>, <dl-checkbox>, <dl-radio>: Controles de selección y alternancia.
• <dl-input>, <dl-textarea>, <dl-select>, <dl-slider>, <dl-date-picker>: Entradas de formulario reactivas.
• <dl-progress-bar>, <dl-spinner>: Indicadores visuales de progreso.
• <dl-grid>, <dl-col>: Sistema de grilla flexible y responsivo.

Nivel 2: Compound (Componentes Compuestos)

Composiciones de uno o más componentes básicos:

• <dl-chips>: Colecciones de filtros y etiquetas interactivas.
• <dl-card>: Tarjetas con soporte de header, body, acciones y footer.
• <dl-search-input>: Entrada de búsqueda integrada con debounce y botón de limpieza.
• <dl-dropdown>: Menús desplegables con posicionamiento inteligente.
• <dl-breadcrumb>: Navegación de migas de pan adaptativa.
• <dl-table>: Tabla de datos avanzada con paginación, ordenamiento y estados vacíos.
• <dl-accordion>: Paneles colapsables accesibles.
• <dl-popover>: Tooltips y paneles flotantes interactivos.
• <dl-empty>: Pantallas de estado vacío con ilustración y llamada a la acción.
• <dl-comments>, <dl-checklist>: Herramientas de edición y colaboración.
• <dl-calendar>: Selector de período mensual y anual interactivo (modo inline y popover).

Nivel 3: Complex (Estructuras de Shell y Overlays)

Módulos completos de navegación y ventanas modales:

• <dl-header>: Barra de navegación superior con soporte de logo, perfil y acciones móviles.
• <dl-sidebar> / <dl-sidenav>: Barras laterales de navegación colapsables con estados activos.
• <dl-layout>: Shell estructural de aplicación (.dl-app-layout, .dl-app-main, .dl-app-content).
• <dl-modal> / <dl-dialog>: Diálogos y modales accesibles con backdrop difuminado.
• <dl-toast>: Sistema reactivo de notificaciones tipo push en pantalla.
• <dl-masonry>: Disposición en cuadrícula tipo muro de ladrillos dinámica.
• <dl-zen>: Modo lectura inmersivo a pantalla completa con 4 temas (Claro, Sepia, Noche, OLED), zoom tipográfico, barra de scroll superior y navegación por gestos Swipe.

Nivel 4: Mobile (Optimización Táctil)

Diseñados exclusivamente para la experiencia en smartphones y tablets:

• <dl-drawer>: Menú inferior/lateral deslizable mediante gestos táctiles.
• <dl-footer-bar>: Barra de navegación inferior flotante tipo app nativa.

Nivel 5: Specialized & External (Extensiones de Dominio)

Componentes de alta especialización integrados:

• <dl-tcg>: Visualizador interactivo de cartas coleccionables con efectos holográficos.
• <dl-markdown>: Renderizador de contenido Markdown con sintaxis enriquecida.
• <dl-excel-grid>: Grilla tabular de alta densidad tipo hoja de cálculo.
• <dl-kanban>: Tablero Kanban interactivo con columnas de estado.

🎨 Tokens de Diseño y Theming

devless-angular utiliza variables nativas de CSS que permiten cambiar de tema sin recargar estilos ni procesar clases en tiempo de ejecución.

Modos Oscuro (Default) y Claro

Para alternar entre modos, solo agrega el atributo data-theme="light" o la clase .light en tu etiqueta <html> o contenedor principal:

<!-- Modo Oscuro (Por defecto) -->
<html data-theme="dark">

<!-- Modo Claro (Inspirado en Jira / Gira) -->
<html data-theme="light">

Principales Variables Disponibles

:root {
  /* Fondos y Superficies */
  --dl-bg-canvas: #0b0f19;
  --dl-bg-surface: #151b2b;
  --dl-bg-surface-elevated: #1a2236;
  --dl-border-default: rgba(255, 255, 255, 0.12);

  /* Color Primario / Brand */
  --dl-color-primary: #3880ff;
  --dl-color-primary-hover: #2563eb;
  --dl-text-primary: #f8fafc;
  --dl-text-secondary: #94a3b8;

  /* Estados Semánticos */
  --dl-color-success: #10b981;
  --dl-color-warning: #f59e0b;
  --dl-color-danger: #ef4444;
  --dl-color-info: #3880ff;
}

📋 Servicios Incluidos

| Servicio | Inyección | Descripción | |---|---|---| | DlToastService | inject(DlToastService) | Notificaciones toast reactivas con timer y tipos (success, error, info, warning). | | DlDialogService | inject(DlDialogService) | Confirmaciones modales y alertas tipo SweetAlert sin dependencias externas. | | DlKeyboardService | inject(DlKeyboardService) | Gestor centralizado de atajos de teclado (shortcuts) y accesibilidad. | | DlTouchService | inject(DlTouchService) | Detección y manejo nativo de gestos táctiles (swipe, move) agnóstico de frameworks y libre de dependencias. | | DlSpeechService | inject(DlSpeechService) | Síntesis de voz (Text-to-Speech) nativa y reactiva con Signals (speak, pause, resume, stop). | | DlPlatformService | inject(DlPlatformService) | Detección de dispositivo (móvil, tablet, escritorio, touch capabilities). |

📜 Historial de Versiones

v1.1.2 (Release Actual)

• Lectura en Voz Alta (Text-to-Speech) en <dl-zen>: Asistente de voz accesible nativo para lectura inmersiva con botón interactivo de reproducción/pausa/reanudación, extracción inteligente de texto del cuerpo y cancelación automática al navegar o cerrar.
• Nuevo DlTouchService: Servicio táctil nativo desacoplado de Ionic / GestureController con soporte de swipe multi-direccional y filtro de intención horizontal calibrado.
• Modo Carrusel en <dl-zen>: Navegación por diapositivas con aceleración por hardware (transitionEffect: 'carousel'), reseteo automático de scroll y swipe táctil integrado.
• Hotfix de Teclado en <dl-zen>: Se ignoran flechas de navegación cuando el usuario edita texto en inputs, textareas o bloques Markdown.
• Responsive Móvil <dl-zen>: Header ultra compacto con soporte para muesca/notch (safe-area-inset-top), truncado de título y compactación táctil de acciones.
• Reactividad en <dl-zen>: Sincronización dinámica de theme y fontSize vía Angular effect().

v1.1.1

• Nuevo <dl-zen>: Modo lectura inmersivo a pantalla completa con 4 paletas calibradas (light, sepia, dark, oled), ajuste de tipografía y barra de scroll superior.
• Rediseño <dl-chips>: Navegación por scroll con gradientes de desvanecimiento laterales estilo Google (iron-selector / YouTube), flechas que se revelan únicamente en hover sin recorte de 1px y soporte para modo claro.
• Mejoras en <dl-markdown>: Botón Copiar estilizado con notificación toast integrada ("codigo copiado") y nuevo analizador de sintaxis nativo para JavaScript / TypeScript (import, export, tipos, decoradores @Component).

v1.1.0

• Nuevo <dl-calendar>: Componente de selección de período mensual/anual con navegación en línea y modo desplegable (popover).
• Mejoras de Builds e Integridad: Optimización del bundle de distribución y resolución de tipos y señales.

v1.0.0 (Salto Generacional)

• Reescritura Completa: Migración a Angular 22+ y componentes 100% standalone.
• Soberanía CSS: Eliminación completa de dependencias de Bootstrap y Tailwind CSS en favor de tokens CSS nativos.
• 5 Niveles de Jerarquía: 40+ componentes categorizados desde Basics hasta Specialized.
• Servicios Nativos: Nuevos servicios DlToastService, DlDialogService, DlKeyboardService y DlPlatformService.
• Soporte Móvil: Componentes dedicados <dl-drawer> y <dl-footer-bar>.

v0.2.88 (Versión Legada)

• Última versión bajo arquitectura híbrida basada en Angular 18 con soporte modular.

📄 Licencia

Distribuido bajo la Licencia MIT. Consulta LICENSE para más información.
Desarrollado y mantenido por Devless.