valtech-components 2.0.288 → 2.0.289

package/fesm2022/valtech-components.mjs

@@ -1007,15 +1007,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 /**
  * 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
  * }
@@ -1024,14 +1024,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 class LinkProcessorService {
     constructor(sanitizer) {
         this.sanitizer = sanitizer;
-        // Regex para detectar URLs completas (http/https)
-        this.urlRegex = /(https?:\/\/[^\s]+)/g;
-        // Regex para detectar rutas internas (empiezan con / pero no son URLs completas)
-        this.internalRouteRegex = /(\s|^)(\/[^\s]*)/g;
+        // Regex para detectar URLs completas (http/https) - excluye caracteres de puntuación al final
+        this.urlRegex = /(https?:\/\/[^\s,;.!?()]+)/g;
+        // Regex para detectar rutas internas (empiezan con / pero no son URLs completas) - excluye puntuación
+        this.internalRouteRegex = /(\s|^)(\/[^\s,;.!?()]*)/g;
+        // Regex para detectar enlaces estilo Markdown [texto](url)
+        this.markdownLinkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
     }
     /**
      * 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
@@ -1040,10 +1042,11 @@ 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'
      *   }
      * );
@@ -1052,31 +1055,53 @@ class LinkProcessorService {
     processLinks(text, config = {}) {
         if (!text)
             return '';
-        const { openExternalInNewTab = true, openInternalInNewTab = false, linkClass = 'processed-link', externalLinkClass = 'external-link', internalLinkClass = 'internal-link', } = config;
+        const { openExternalInNewTab = true, openInternalInNewTab = false, linkClass = 'processed-link', externalLinkClass = 'external-link', internalLinkClass = 'internal-link', processMarkdownLinks = true, } = config;
         let hasLinks = false;
         let processedText = text;
-        // Procesar URLs externas primero
-        if (this.urlRegex.test(text)) {
+        // 1. Procesar enlaces estilo Markdown [texto](url) primero
+        if (processMarkdownLinks && this.markdownLinkRegex.test(text)) {
+            hasLinks = true;
+            this.markdownLinkRegex.lastIndex = 0; // Reset regex
+            processedText = processedText.replace(this.markdownLinkRegex, (match, linkText, url) => {
+                const isExternal = /^https?:\/\//.test(url);
+                const target = (isExternal ? openExternalInNewTab : openInternalInNewTab)
+                    ? isExternal
+                        ? ' target="_blank" rel="noopener noreferrer"'
+                        : ' target="_blank"'
+                    : '';
+                const typeClass = isExternal ? externalLinkClass : internalLinkClass;
+                const classes = `${linkClass} ${typeClass}`.trim();
+                return `<a href="${url}"${target} class="${classes}">${linkText}</a>`;
+            });
+        }
+        // 2. Procesar URLs externas directas
+        if (this.urlRegex.test(processedText)) {
             hasLinks = true;
             this.urlRegex.lastIndex = 0; // Reset regex
             processedText = processedText.replace(this.urlRegex, url => {
+                // Verificar que no esté ya dentro de un enlace procesado
+                const beforeMatch = processedText.substring(0, processedText.indexOf(url));
+                if (beforeMatch.includes('<a href="' + url + '"')) {
+                    return url; // Ya está procesado como Markdown link
+                }
                 const target = openExternalInNewTab ? ' target="_blank" rel="noopener noreferrer"' : '';
                 const classes = `${linkClass} ${externalLinkClass}`.trim();
                 return `<a href="${url}"${target} class="${classes}">${url}</a>`;
             });
         }
-        // Procesar rutas internas después
+        // 3. Procesar rutas internas después
         if (this.internalRouteRegex.test(processedText)) {
             hasLinks = true;
             this.internalRouteRegex.lastIndex = 0; // Reset regex
             processedText = processedText.replace(this.internalRouteRegex, (match, prefix, route) => {
                 // Solo procesar si no está ya dentro de un enlace
-                if (processedText.indexOf(`href="${route}"`) === -1) {
-                    const target = openInternalInNewTab ? ' target="_blank"' : '';
-                    const classes = `${linkClass} ${internalLinkClass}`.trim();
-                    return `${prefix}<a href="${route}"${target} class="${classes}">${route}</a>`;
+                const beforeMatch = processedText.substring(0, processedText.indexOf(match));
+                if (beforeMatch.includes(`href="${route}"`)) {
+                    return match; // Ya está procesado
                 }
-                return match;
+                const target = openInternalInNewTab ? ' target="_blank"' : '';
+                const classes = `${linkClass} ${internalLinkClass}`.trim();
+                return `${prefix}<a href="${route}"${target} class="${classes}">${route}</a>`;
             });
         }
         // Si hay enlaces, sanitizar el HTML
@@ -1086,14 +1111,14 @@ class LinkProcessorService {
         return text;
     }
     /**
-     * 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
      * ```
      */
@@ -1103,20 +1128,24 @@ class LinkProcessorService {
         // Reset regex indices
         this.urlRegex.lastIndex = 0;
         this.internalRouteRegex.lastIndex = 0;
-        return this.urlRegex.test(text) || this.internalRouteRegex.test(text);
+        this.markdownLinkRegex.lastIndex = 0;
+        return (this.urlRegex.test(text) ||
+            this.internalRouteRegex.test(text) ||
+            this.markdownLinkRegex.test(text));
     }
     /**
      * 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' }
      * // ]
      * ```
      */
@@ -1127,14 +1156,30 @@ class LinkProcessorService {
         // Reset regex indices
         this.urlRegex.lastIndex = 0;
         this.internalRouteRegex.lastIndex = 0;
-        // Extraer URLs externas
+        this.markdownLinkRegex.lastIndex = 0;
+        // Extraer enlaces Markdown primero
         let match;
+        while ((match = this.markdownLinkRegex.exec(text)) !== null) {
+            const url = match[2];
+            const linkText = match[1];
+            const type = /^https?:\/\//.test(url) ? 'external' : 'internal';
+            links.push({ url, type, text: linkText });
+        }
+        // Extraer URLs externas directas
         while ((match = this.urlRegex.exec(text)) !== null) {
-            links.push({ url: match[1], type: 'external' });
+            const url = match[1];
+            // Verificar que no esté ya capturado como Markdown link
+            if (!links.some(link => link.url === url)) {
+                links.push({ url, type: 'external', text: url });
+            }
         }
-        // Extraer rutas internas
+        // Extraer rutas internas directas
         while ((match = this.internalRouteRegex.exec(text)) !== null) {
-            links.push({ url: match[2], type: 'internal' });
+            const url = match[2];
+            // Verificar que no esté ya capturado como Markdown link
+            if (!links.some(link => link.url === url)) {
+                links.push({ url, type: 'internal', text: url });
+            }
         }
         return links;
     }
@@ -2053,7 +2098,7 @@ class TextComponent {
         <p [class]="props.size" [class.bold]="props.bold">{{ displayContent$ | async }}</p>
       }
     </ion-text>
-  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143,73,248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255,255,255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.small{font-size:.75rem;line-height:1.25rem;font-weight:400}.small.bold{font-size:.75rem;line-height:1.25rem;font-weight:700}.medium{font-size:.875rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.medium{font-size:1rem;line-height:1.5rem}}.medium.bold{font-size:.875rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.medium.bold{font-size:1rem;line-height:1.5rem}}.large{font-size:1rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.large{font-size:1.125rem;line-height:1.5rem}}.large.bold{font-size:1rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.large.bold{font-size:1.125rem;line-height:1.5rem}}.xlarge{font-size:1.125rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.xlarge{font-size:1.5rem;line-height:2rem}}.xlarge.bold{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.xlarge.bold{font-size:1.5rem;line-height:2rem}}:host ::ng-deep .processed-link{color:var(--ion-color-primary, #3880ff);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:color .3s ease}:host ::ng-deep .processed-link:hover{color:var(--ion-color-primary-shade, #3171e0);text-decoration-thickness:2px}:host ::ng-deep .processed-link:active{color:var(--ion-color-primary-tint, #4c8dff)}:host ::ng-deep .external-link:after{content:\" \\2197\";font-size:.8em;opacity:.7}:host ::ng-deep .internal-link{color:var(--ion-color-secondary, #0cd1e8)}:host ::ng-deep .internal-link:hover{color:var(--ion-color-secondary-shade, #0bb8cc)}\n"], dependencies: [{ kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ProcessLinksPipe, name: "processLinks" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143,73,248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255,255,255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.small{font-size:.75rem;line-height:1.25rem;font-weight:400}.small.bold{font-size:.75rem;line-height:1.25rem;font-weight:700}.medium{font-size:.875rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.medium{font-size:1rem;line-height:1.5rem}}.medium.bold{font-size:.875rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.medium.bold{font-size:1rem;line-height:1.5rem}}.large{font-size:1rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.large{font-size:1.125rem;line-height:1.5rem}}.large.bold{font-size:1rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.large.bold{font-size:1.125rem;line-height:1.5rem}}.xlarge{font-size:1.125rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.xlarge{font-size:1.5rem;line-height:2rem}}.xlarge.bold{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.xlarge.bold{font-size:1.5rem;line-height:2rem}}:host ::ng-deep .processed-link{color:var(--ion-color-primary, #3880ff);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:color .3s ease}:host ::ng-deep .processed-link:hover{color:var(--ion-color-primary-shade, #3171e0);text-decoration-thickness:2px}:host ::ng-deep .processed-link:active{color:var(--ion-color-primary-tint, #4c8dff)}:host ::ng-deep .external-link:after{content:\" \\2197\";font-size:.8em;opacity:.7}:host ::ng-deep .internal-link{color:var(--ion-color-primary, #0cd1e8)}:host ::ng-deep .internal-link:hover{color:var(--ion-color-primary-shade, #0bb8cc)}\n"], dependencies: [{ kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ProcessLinksPipe, name: "processLinks" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextComponent, decorators: [{
             type: Component,
@@ -2069,7 +2114,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         <p [class]="props.size" [class.bold]="props.bold">{{ displayContent$ | async }}</p>
       }
     </ion-text>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@charset \"UTF-8\";:root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143,73,248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255,255,255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.small{font-size:.75rem;line-height:1.25rem;font-weight:400}.small.bold{font-size:.75rem;line-height:1.25rem;font-weight:700}.medium{font-size:.875rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.medium{font-size:1rem;line-height:1.5rem}}.medium.bold{font-size:.875rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.medium.bold{font-size:1rem;line-height:1.5rem}}.large{font-size:1rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.large{font-size:1.125rem;line-height:1.5rem}}.large.bold{font-size:1rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.large.bold{font-size:1.125rem;line-height:1.5rem}}.xlarge{font-size:1.125rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.xlarge{font-size:1.5rem;line-height:2rem}}.xlarge.bold{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.xlarge.bold{font-size:1.5rem;line-height:2rem}}:host ::ng-deep .processed-link{color:var(--ion-color-primary, #3880ff);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:color .3s ease}:host ::ng-deep .processed-link:hover{color:var(--ion-color-primary-shade, #3171e0);text-decoration-thickness:2px}:host ::ng-deep .processed-link:active{color:var(--ion-color-primary-tint, #4c8dff)}:host ::ng-deep .external-link:after{content:\" \\2197\";font-size:.8em;opacity:.7}:host ::ng-deep .internal-link{color:var(--ion-color-secondary, #0cd1e8)}:host ::ng-deep .internal-link:hover{color:var(--ion-color-secondary-shade, #0bb8cc)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@charset \"UTF-8\";:root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143,73,248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255,255,255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.small{font-size:.75rem;line-height:1.25rem;font-weight:400}.small.bold{font-size:.75rem;line-height:1.25rem;font-weight:700}.medium{font-size:.875rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.medium{font-size:1rem;line-height:1.5rem}}.medium.bold{font-size:.875rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.medium.bold{font-size:1rem;line-height:1.5rem}}.large{font-size:1rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.large{font-size:1.125rem;line-height:1.5rem}}.large.bold{font-size:1rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.large.bold{font-size:1.125rem;line-height:1.5rem}}.xlarge{font-size:1.125rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.xlarge{font-size:1.5rem;line-height:2rem}}.xlarge.bold{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.xlarge.bold{font-size:1.5rem;line-height:2rem}}:host ::ng-deep .processed-link{color:var(--ion-color-primary, #3880ff);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:color .3s ease}:host ::ng-deep .processed-link:hover{color:var(--ion-color-primary-shade, #3171e0);text-decoration-thickness:2px}:host ::ng-deep .processed-link:active{color:var(--ion-color-primary-tint, #4c8dff)}:host ::ng-deep .external-link:after{content:\" \\2197\";font-size:.8em;opacity:.7}:host ::ng-deep .internal-link{color:var(--ion-color-primary, #0cd1e8)}:host ::ng-deep .internal-link:hover{color:var(--ion-color-primary-shade, #0bb8cc)}\n"] }]
         }], ctorParameters: () => [{ type: ContentService }, { type: LinkProcessorService }], propDecorators: { props: [{
                 type: Input
             }] } });
@@ -6572,6 +6617,36 @@ class LinkProcessingExampleComponent {
                 internalLinkClass: 'internal-same-tab',
             },
         };
+        this.markdownLinksProps = {
+            content: 'Consulta [la documentación de Angular](https://angular.io/docs) y ve a [configuración del perfil](/profile/settings) para más opciones.',
+            size: 'medium',
+            color: 'dark',
+            bold: false,
+            processLinks: true,
+            linkConfig: {
+                openExternalInNewTab: true,
+                openInternalInNewTab: false,
+                processMarkdownLinks: true,
+                linkClass: 'markdown-link',
+                externalLinkClass: 'markdown-external',
+                internalLinkClass: 'markdown-internal',
+            },
+        };
+        this.mixedFormatsProps = {
+            content: 'Aquí hay [documentación oficial](https://angular.io/docs), un enlace directo https://github.com/angular/angular, y una ruta interna /dashboard/analytics. ¡Todos funcionan!',
+            size: 'medium',
+            color: 'dark',
+            bold: false,
+            processLinks: true,
+            linkConfig: {
+                openExternalInNewTab: true,
+                openInternalInNewTab: false,
+                processMarkdownLinks: true,
+                linkClass: 'mixed-link',
+                externalLinkClass: 'mixed-external',
+                internalLinkClass: 'mixed-internal',
+            },
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkProcessingExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LinkProcessingExampleComponent, isStandalone: true, selector: "val-link-processing-example", ngImport: i0, template: `
@@ -6602,6 +6677,16 @@ class LinkProcessingExampleComponent {
         <h3>Enlaces sin abrir en nueva pestaña:</h3>
         <val-text [props]="sameTabLinksProps"></val-text>
       </div>
+
+      <div class="example-section">
+        <h3>Enlaces estilo Markdown [texto](url):</h3>
+        <val-text [props]="markdownLinksProps"></val-text>
+      </div>
+
+      <div class="example-section">
+        <h3>Mezcla de enlaces directos y Markdown:</h3>
+        <val-text [props]="mixedFormatsProps"></val-text>
+      </div>
     </div>
   `, isInline: true, styles: [".link-examples{padding:20px;max-width:800px}.example-section{margin-bottom:24px;padding:16px;border:1px solid var(--ion-color-light, #f4f5f8);border-radius:8px;background:var(--ion-color-light-tint, #f5f6f9)}h2{color:var(--ion-color-primary, #3880ff);margin-bottom:20px}h3{color:var(--ion-color-dark, #222428);margin-bottom:10px;font-size:16px}\n"], dependencies: [{ kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
 }
@@ -6635,6 +6720,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         <h3>Enlaces sin abrir en nueva pestaña:</h3>
         <val-text [props]="sameTabLinksProps"></val-text>
       </div>
+
+      <div class="example-section">
+        <h3>Enlaces estilo Markdown [texto](url):</h3>
+        <val-text [props]="markdownLinksProps"></val-text>
+      </div>
+
+      <div class="example-section">
+        <h3>Mezcla de enlaces directos y Markdown:</h3>
+        <val-text [props]="mixedFormatsProps"></val-text>
+      </div>
     </div>
   `, styles: [".link-examples{padding:20px;max-width:800px}.example-section{margin-bottom:24px;padding:16px;border:1px solid var(--ion-color-light, #f4f5f8);border-radius:8px;background:var(--ion-color-light-tint, #f5f6f9)}h2{color:var(--ion-color-primary, #3880ff);margin-bottom:20px}h3{color:var(--ion-color-dark, #222428);margin-bottom:10px;font-size:16px}\n"] }]
         }] });