valtech-components 2.0.288 → 2.0.290

package/lib/examples/link-processing-example.component.d.ts

@@ -17,6 +17,9 @@ export declare class LinkProcessingExampleComponent {
     customLinksProps: TextMetadata;
     mixedLinksProps: TextMetadata;
     sameTabLinksProps: TextMetadata;
+    markdownLinksProps: TextMetadata;
+    mixedFormatsProps: TextMetadata;
+    punctuationTestProps: TextMetadata;
     static ɵfac: i0.ɵɵFactoryDeclaration<LinkProcessingExampleComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<LinkProcessingExampleComponent, "val-link-processing-example", never, {}, {}, never, never, true, never>;
 }

package/lib/services/link-processor.service.d.ts

@@ -11,19 +11,21 @@ export interface LinkProcessorConfig {
     externalLinkClass?: string;
     /** Custom CSS classes for internal links */
     internalLinkClass?: string;
+    /** Whether to process Markdown-style links [text](url) (default: true) */
+    processMarkdownLinks?: boolean;
 }
 /**
  * LinkProcessorService - Service for processing text content to convert URLs and internal routes into clickable links.
  *
- * This service automatically detects external URLs (http/https) and internal routes (starting with /)
- * and converts them into HTML anchor elements with appropriate attributes.
+ * This service automatically detects external URLs (http/https), internal routes (starting with /),
+ * and Markdown-style links [text](url) and converts them into HTML anchor elements with appropriate attributes.
  *
  * @example Basic usage:
  * ```typescript
  * constructor(private linkProcessor: LinkProcessorService) {}
  *
  * processText() {
- *   const text = 'Visit https://example.com or go to /profile';
+ *   const text = 'Visit https://example.com, go to /profile, or [check docs](https://docs.example.com)';
  *   const processed = this.linkProcessor.processLinks(text);
  *   // Returns SafeHtml with clickable links
  * }
@@ -33,10 +35,11 @@ export declare class LinkProcessorService {
     private sanitizer;
     private readonly urlRegex;
     private readonly internalRouteRegex;
+    private readonly markdownLinkRegex;
     constructor(sanitizer: DomSanitizer);
     /**
      * Procesa texto para convertir enlaces en elementos <a> clickeables.
-     * Detecta automáticamente URLs externas e internas y las convierte en enlaces.
+     * Detecta automáticamente URLs externas, rutas internas y enlaces estilo Markdown.
      *
      * @param text - Texto a procesar
      * @param config - Configuración del procesamiento
@@ -45,10 +48,11 @@ export declare class LinkProcessorService {
      * @example
      * ```typescript
      * const result = this.linkProcessor.processLinks(
-     *   'Visit https://example.com or /profile',
+     *   'Visit https://example.com, go to /profile, or [check docs](https://docs.example.com)',
      *   {
      *     openExternalInNewTab: true,
      *     openInternalInNewTab: false,
+     *     processMarkdownLinks: true,
      *     linkClass: 'custom-link'
      *   }
      * );
@@ -56,14 +60,14 @@ export declare class LinkProcessorService {
      */
     processLinks(text: string, config?: LinkProcessorConfig): SafeHtml | string;
     /**
-     * Detecta si un texto contiene enlaces (URLs o rutas internas).
+     * Detecta si un texto contiene enlaces (URLs, rutas internas o enlaces Markdown).
      *
      * @param text - Texto a analizar
      * @returns true si contiene enlaces
      *
      * @example
      * ```typescript
-     * const hasLinks = this.linkProcessor.hasLinks('Visit https://example.com');
+     * const hasLinks = this.linkProcessor.hasLinks('Visit https://example.com or [docs](https://docs.com)');
      * // Returns: true
      * ```
      */
@@ -72,20 +76,22 @@ export declare class LinkProcessorService {
      * Extrae todos los enlaces de un texto.
      *
      * @param text - Texto a analizar
-     * @returns Array de enlaces encontrados con su tipo
+     * @returns Array de enlaces encontrados con su tipo y texto (si es Markdown)
      *
      * @example
      * ```typescript
-     * const links = this.linkProcessor.extractLinks('Visit https://example.com or /profile');
+     * const links = this.linkProcessor.extractLinks('Visit https://example.com, /profile, or [docs](https://docs.com)');
      * // Returns: [
-     * //   { url: 'https://example.com', type: 'external' },
-     * //   { url: '/profile', type: 'internal' }
+     * //   { url: 'https://example.com', type: 'external', text: 'https://example.com' },
+     * //   { url: '/profile', type: 'internal', text: '/profile' },
+     * //   { url: 'https://docs.com', type: 'external', text: 'docs' }
      * // ]
      * ```
      */
     extractLinks(text: string): Array<{
         url: string;
         type: 'external' | 'internal';
+        text: string;
     }>;
     static ɵfac: i0.ɵɵFactoryDeclaration<LinkProcessorService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<LinkProcessorService>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.288",
+  "version": "2.0.290",
   "peerDependencies": {
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",

package/src/lib/components/styles/overrides.scss

@@ -203,3 +203,37 @@ ion-modal.modal-sheet ion-header ion-toolbar:last-of-type {
   padding: 0 !important;
   padding-bottom: 0.5rem !important;
 }
+
+// Estilos para enlaces procesados automáticamente
+.processed-link {
+  color: var(--ion-color-primary, #3880ff);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+  transition: color 0.3s ease;
+
+  &:hover {
+    color: var(--ion-color-primary-shade, #3171e0);
+    text-decoration-thickness: 2px;
+  }
+
+  &:active {
+    color: var(--ion-color-primary-tint, #4c8dff);
+  }
+}
+
+.external-link {
+  &::after {
+    content: ' ↗';
+    font-size: 0.8em;
+    opacity: 0.7;
+  }
+}
+
+.internal-link {
+  color: var(--ion-color-secondary, #0cd1e8);
+
+  &:hover {
+    color: var(--ion-color-secondary-shade, #0bb8cc);
+  }
+}