valtech-components 2.0.286 → 2.0.288

package/fesm2022/valtech-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, Injectable, inject, InjectionToken, Inject, ChangeDetectionStrategy, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { EventEmitter, Component, Input, Output, Injectable, inject, Pipe, InjectionToken, Inject, ChangeDetectionStrategy, ViewChild, ChangeDetectorRef } from '@angular/core';
 import { IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonProgressBar, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonButtons, IonTextarea, IonDatetime, IonDatetimeButton, IonModal, IonInput, IonRadioGroup, IonRadio, IonSearchbar, IonSelect, IonSelectOption, IonToolbar, IonTitle, IonMenuButton, IonFooter, IonHeader, IonList, IonListHeader, IonLabel, IonNote, IonItem, IonContent } from '@ionic/angular/standalone';
 import * as i1 from '@angular/common';
 import { CommonModule, NgStyle, AsyncPipe, NgIf, NgFor, NgClass } from '@angular/common';
@@ -8,9 +8,10 @@ import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBa
 import { Router, RouterLink } from '@angular/router';
 import { Browser } from '@capacitor/browser';
 import { map, BehaviorSubject, distinctUntilChanged, Subscription, of } from 'rxjs';
-import * as i1$1 from '@angular/forms';
+import * as i1$1 from '@angular/platform-browser';
+import * as i1$2 from '@angular/forms';
 import { ReactiveFormsModule, FormsModule, Validators } from '@angular/forms';
-import * as i1$2 from 'ng-otp-input';
+import * as i1$3 from 'ng-otp-input';
 import { NgOtpInputComponent, NgOtpInputModule } from 'ng-otp-input';
 import * as i2 from '@ionic/angular';
 import { IonicModule } from '@ionic/angular';
@@ -1003,6 +1004,216 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * 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.
+ *
+ * @example Basic usage:
+ * ```typescript
+ * constructor(private linkProcessor: LinkProcessorService) {}
+ *
+ * processText() {
+ *   const text = 'Visit https://example.com or go to /profile';
+ *   const processed = this.linkProcessor.processLinks(text);
+ *   // Returns SafeHtml with clickable links
+ * }
+ * ```
+ */
+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;
+    }
+    /**
+     * Procesa texto para convertir enlaces en elementos <a> clickeables.
+     * Detecta automáticamente URLs externas e internas y las convierte en enlaces.
+     *
+     * @param text - Texto a procesar
+     * @param config - Configuración del procesamiento
+     * @returns SafeHtml con enlaces procesados o string original
+     *
+     * @example
+     * ```typescript
+     * const result = this.linkProcessor.processLinks(
+     *   'Visit https://example.com or /profile',
+     *   {
+     *     openExternalInNewTab: true,
+     *     openInternalInNewTab: false,
+     *     linkClass: 'custom-link'
+     *   }
+     * );
+     * ```
+     */
+    processLinks(text, config = {}) {
+        if (!text)
+            return '';
+        const { openExternalInNewTab = true, openInternalInNewTab = false, linkClass = 'processed-link', externalLinkClass = 'external-link', internalLinkClass = 'internal-link', } = config;
+        let hasLinks = false;
+        let processedText = text;
+        // Procesar URLs externas primero
+        if (this.urlRegex.test(text)) {
+            hasLinks = true;
+            this.urlRegex.lastIndex = 0; // Reset regex
+            processedText = processedText.replace(this.urlRegex, url => {
+                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
+        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>`;
+                }
+                return match;
+            });
+        }
+        // Si hay enlaces, sanitizar el HTML
+        if (hasLinks) {
+            return this.sanitizer.bypassSecurityTrustHtml(processedText);
+        }
+        return text;
+    }
+    /**
+     * Detecta si un texto contiene enlaces (URLs o rutas internas).
+     *
+     * @param text - Texto a analizar
+     * @returns true si contiene enlaces
+     *
+     * @example
+     * ```typescript
+     * const hasLinks = this.linkProcessor.hasLinks('Visit https://example.com');
+     * // Returns: true
+     * ```
+     */
+    hasLinks(text) {
+        if (!text)
+            return false;
+        // Reset regex indices
+        this.urlRegex.lastIndex = 0;
+        this.internalRouteRegex.lastIndex = 0;
+        return this.urlRegex.test(text) || this.internalRouteRegex.test(text);
+    }
+    /**
+     * Extrae todos los enlaces de un texto.
+     *
+     * @param text - Texto a analizar
+     * @returns Array de enlaces encontrados con su tipo
+     *
+     * @example
+     * ```typescript
+     * const links = this.linkProcessor.extractLinks('Visit https://example.com or /profile');
+     * // Returns: [
+     * //   { url: 'https://example.com', type: 'external' },
+     * //   { url: '/profile', type: 'internal' }
+     * // ]
+     * ```
+     */
+    extractLinks(text) {
+        if (!text)
+            return [];
+        const links = [];
+        // Reset regex indices
+        this.urlRegex.lastIndex = 0;
+        this.internalRouteRegex.lastIndex = 0;
+        // Extraer URLs externas
+        let match;
+        while ((match = this.urlRegex.exec(text)) !== null) {
+            links.push({ url: match[1], type: 'external' });
+        }
+        // Extraer rutas internas
+        while ((match = this.internalRouteRegex.exec(text)) !== null) {
+            links.push({ url: match[2], type: 'internal' });
+        }
+        return links;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkProcessorService, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkProcessorService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkProcessorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
+
+/**
+ * ProcessLinksPipe - Pipe para procesar texto y convertir URLs en enlaces clickeables.
+ *
+ * Este pipe standalone detecta automáticamente URLs externas (http/https) y rutas internas
+ * (que empiezan con /) y las convierte en elementos HTML anchor con los atributos apropiados.
+ *
+ * @example Uso básico:
+ * ```html
+ * <div [innerHTML]="'Visit https://example.com or go to /profile' | processLinks"></div>
+ * ```
+ *
+ * @example Con configuración personalizada:
+ * ```html
+ * <div [innerHTML]="text | processLinks:linkConfig"></div>
+ * ```
+ *
+ * @example En TypeScript:
+ * ```typescript
+ * export class MyComponent {
+ *   linkConfig: LinkProcessorConfig = {
+ *     openExternalInNewTab: true,
+ *     openInternalInNewTab: false,
+ *     linkClass: 'my-link',
+ *     externalLinkClass: 'external',
+ *     internalLinkClass: 'internal'
+ *   };
+ * }
+ * ```
+ */
+class ProcessLinksPipe {
+    constructor() {
+        this.linkProcessor = inject(LinkProcessorService);
+    }
+    /**
+     * Transforma texto procesando URLs y rutas internas para convertirlas en enlaces.
+     *
+     * @param value - El texto a procesar
+     * @param config - Configuración opcional para el procesamiento de enlaces
+     * @returns SafeHtml con enlaces procesados o string original si no hay enlaces
+     *
+     * @example
+     * ```html
+     * <!-- Uso básico -->
+     * <p [innerHTML]="'Check out https://angular.io' | processLinks"></p>
+     *
+     * <!-- Con configuración -->
+     * <p [innerHTML]="message | processLinks:{ openExternalInNewTab: false }"></p>
+     * ```
+     */
+    transform(value, config) {
+        if (!value) {
+            return '';
+        }
+        return this.linkProcessor.processLinks(value, config);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProcessLinksPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ProcessLinksPipe, isStandalone: true, name: "processLinks" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProcessLinksPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'processLinks',
+                    standalone: true,
+                }]
+        }] });
+
 /**
  * Create a reactive content observable from a content key.
  * This is the primary utility for the `fromContent` pattern with unified support
@@ -1747,6 +1958,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * }"></val-text>
  * ```
  *
+ * @example With automatic link processing:
+ * ```html
+ * <val-text [props]="{
+ *   content: 'Visit https://example.com or go to /profile for more info',
+ *   processLinks: true,
+ *   linkConfig: {
+ *     openExternalInNewTab: true,
+ *     openInternalInNewTab: false,
+ *     linkClass: 'custom-link',
+ *     externalLinkClass: 'external',
+ *     internalLinkClass: 'internal'
+ *   },
+ *   color: 'primary',
+ *   size: 'medium'
+ * }"></val-text>
+ * ```
+ *
  * @example Using ContentService helper:
  * ```typescript
  * // In component
@@ -1766,8 +1994,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * @input props: TextMetadata - Configuration for the text (content, styling, and reactive content options)
  */
 class TextComponent {
-    constructor(contentService) {
+    constructor(contentService, linkProcessor) {
         this.contentService = contentService;
+        this.linkProcessor = linkProcessor;
         this.subscription = new Subscription();
     }
     ngOnInit() {
@@ -1811,21 +2040,37 @@ class TextComponent {
             this.displayContent$ = of(this.props.contentFallback || '');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextComponent, deps: [{ token: ContentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextComponent, isStandalone: true, selector: "val-text", inputs: { props: "props" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextComponent, deps: [{ token: ContentService }, { token: LinkProcessorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TextComponent, isStandalone: true, selector: "val-text", inputs: { props: "props" }, ngImport: i0, template: `
     <ion-text [color]="props.color">
-      <p [class]="props.size" [class.bold]="props.bold">{{ displayContent$ | async }}</p>
+      @if (props.processLinks) {
+        <p
+          [class]="props.size"
+          [class.bold]="props.bold"
+          [innerHTML]="displayContent$ | async | processLinks: props.linkConfig"
+        ></p>
+      } @else {
+        <p [class]="props.size" [class.bold]="props.bold">{{ displayContent$ | async }}</p>
+      }
     </ion-text>
-  `, isInline: true, styles: [":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}}\n"], dependencies: [{ kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], 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-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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-text', standalone: true, imports: [IonText, AsyncPipe], template: `
+            args: [{ selector: 'val-text', standalone: true, imports: [IonText, AsyncPipe, ProcessLinksPipe], template: `
     <ion-text [color]="props.color">
-      <p [class]="props.size" [class.bold]="props.bold">{{ displayContent$ | async }}</p>
+      @if (props.processLinks) {
+        <p
+          [class]="props.size"
+          [class.bold]="props.bold"
+          [innerHTML]="displayContent$ | async | processLinks: props.linkConfig"
+        ></p>
+      } @else {
+        <p [class]="props.size" [class.bold]="props.bold">{{ displayContent$ | async }}</p>
+      }
     </ion-text>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":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}}\n"] }]
-        }], ctorParameters: () => [{ type: ContentService }], propDecorators: { props: [{
+  `, 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"] }]
+        }], ctorParameters: () => [{ type: ContentService }, { type: LinkProcessorService }], propDecorators: { props: [{
                 type: Input
             }] } });
 /**
@@ -2418,7 +2663,7 @@ class CommentInputComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CommentInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CommentInputComponent, isStandalone: true, selector: "val-comment-input", inputs: { props: "props" }, ngImport: i0, template: `
     <ion-textarea [formControl]="props.control" [counter]="true" [maxlength]="props.range.max"></ion-textarea>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }] }); }
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CommentInputComponent, decorators: [{
             type: Component,
@@ -2620,7 +2865,7 @@ class DateInputComponent {
         </ion-datetime>
       </ng-template>
     </ion-modal>
-  `, isInline: true, styles: [":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)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.button-container{display:flex;flex-direction:column;align-items:flex-start}.action{margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { kind: "component", type: IonDatetimeButton, selector: "ion-datetime-button", inputs: ["color", "datetime", "disabled", "mode"] }, { kind: "component", type: IonModal, selector: "ion-modal" }] }); }
+  `, isInline: true, styles: [":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)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.button-container{display:flex;flex-direction:column;align-items:flex-start}.action{margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { kind: "component", type: IonDatetimeButton, selector: "ion-datetime-button", inputs: ["color", "datetime", "disabled", "mode"] }, { kind: "component", type: IonModal, selector: "ion-modal" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
@@ -2667,7 +2912,7 @@ class EmailInputComponent {
     constructor() { }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EmailInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EmailInputComponent, isStandalone: true, selector: "val-email-input", inputs: { props: "props" }, ngImport: i0, template: ` <ion-input [formControl]="props.control" type="email" [placeholder]="props.placeholder"></ion-input> `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EmailInputComponent, isStandalone: true, selector: "val-email-input", inputs: { props: "props" }, ngImport: i0, template: ` <ion-input [formControl]="props.control" type="email" [placeholder]="props.placeholder"></ion-input> `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EmailInputComponent, decorators: [{
             type: Component,
@@ -2921,7 +3166,7 @@ class HourInputComponent {
     constructor() { }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HourInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HourInputComponent, isStandalone: true, selector: "val-hour-input", inputs: { props: "props" }, ngImport: i0, template: ` <ion-datetime [formControl]="props.control" presentation="time"></ion-datetime>`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HourInputComponent, isStandalone: true, selector: "val-hour-input", inputs: { props: "props" }, ngImport: i0, template: ` <ion-datetime [formControl]="props.control" presentation="time"></ion-datetime>`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HourInputComponent, decorators: [{
             type: Component,
@@ -3435,7 +3680,7 @@ class NumberInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NumberInputComponent, isStandalone: true, selector: "val-number-input", inputs: { props: "props" }, ngImport: i0, template: ` <ion-input [formControl]="props.control" type="number" [placeholder]="props.placeholder"></ion-input> `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NumberInputComponent, isStandalone: true, selector: "val-number-input", inputs: { props: "props" }, ngImport: i0, template: ` <ion-input [formControl]="props.control" type="number" [placeholder]="props.placeholder"></ion-input> `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumberInputComponent, decorators: [{
             type: Component,
@@ -3472,7 +3717,7 @@ class PasswordInputComponent {
         <ion-icon slot="icon-only" [name]="hidePassword ? 'eye-off-outline' : 'eye-outline'"></ion-icon>
       </ion-button>
     </div>
-  `, isInline: true, styles: [":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)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.input-container{display:flex;align-items:center;flex-direction:row}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+  `, isInline: true, styles: [":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)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.input-container{display:flex;align-items:center;flex-direction:row}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PasswordInputComponent, decorators: [{
             type: Component,
@@ -3528,7 +3773,7 @@ class PinInputComponent {
     <div class="otp">
       <ng-otp-input [formCtrl]="props.control" [config]="otpInputConfig"></ng-otp-input>
     </div>
-  `, isInline: true, styles: [":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)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.otp{text-align:center;margin-top:.25rem;font-family:var(--ion-default-font),Arial,sans-serif}.otp-input-box:focus{border-color:#0ff}\n"], dependencies: [{ kind: "ngmodule", type: NgOtpInputModule }, { kind: "component", type: i1$2.NgOtpInputComponent, selector: "ng-otp-input", inputs: ["config", "formCtrl"], outputs: ["onInputChange"] }] }); }
+  `, isInline: true, styles: [":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)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.otp{text-align:center;margin-top:.25rem;font-family:var(--ion-default-font),Arial,sans-serif}.otp-input-box:focus{border-color:#0ff}\n"], dependencies: [{ kind: "ngmodule", type: NgOtpInputModule }, { kind: "component", type: i1$3.NgOtpInputComponent, selector: "ng-otp-input", inputs: ["config", "formCtrl"], outputs: ["onInputChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PinInputComponent, decorators: [{
             type: Component,
@@ -3764,7 +4009,7 @@ class RadioInputComponent {
         <br />
       </ng-container>
     </ion-radio-group>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }] }); }
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioInputComponent, decorators: [{
             type: Component,
@@ -3896,7 +4141,7 @@ class SearchSelectorComponent {
         <ion-select-option [value]="o.id">{{ o.name }}</ion-select-option>
       }
     </ion-select>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "expandedIcon", "fill", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }] }); }
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "expandedIcon", "fill", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchSelectorComponent, decorators: [{
             type: Component,
@@ -4235,7 +4480,7 @@ class SelectSearchComponent {
         </ion-content>
       </ng-template>
     </ion-modal>
-  `, isInline: true, styles: ["ion-header{padding:8px 8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonInput, selector: "ion-input", inputs: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonModal, selector: "ion-modal" }, { kind: "directive", type: i2.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: SearchbarComponent, selector: "val-searchbar", inputs: ["disabled"], outputs: ["filterEvent", "focusEvent", "blurEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+  `, isInline: true, styles: ["ion-header{padding:8px 8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonInput, selector: "ion-input", inputs: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonModal, selector: "ion-modal" }, { kind: "directive", type: i2.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: SearchbarComponent, selector: "val-searchbar", inputs: ["disabled"], outputs: ["filterEvent", "focusEvent", "blurEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectSearchComponent, decorators: [{
             type: Component,
@@ -4321,7 +4566,7 @@ class TextInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextInputComponent, isStandalone: true, selector: "val-text-input", inputs: { props: "props" }, ngImport: i0, template: ` <ion-input [formControl]="props.control" type="text" [placeholder]="props.placeholder" /> `, isInline: true, styles: [":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)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextInputComponent, isStandalone: true, selector: "val-text-input", inputs: { props: "props" }, ngImport: i0, template: ` <ion-input [formControl]="props.control" type="text" [placeholder]="props.placeholder" /> `, isInline: true, styles: [":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)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
@@ -4900,7 +5145,7 @@ class FormComponent {
         }
         return [this.props.actions];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormComponent, deps: [{ token: i1$2.FormBuilder }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FormComponent, isStandalone: true, selector: "val-form", inputs: { props: "props" }, outputs: { onSubmit: "onSubmit", onInvalid: "onInvalid", onSelectChange: "onSelectChange" }, ngImport: i0, template: `
     <div class="container">
       <form [formGroup]="form">
@@ -4966,7 +5211,7 @@ class FormComponent {
         ></val-button-group>
       </form>
     </div>
-  `, isInline: true, styles: [":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)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextInputComponent, selector: "val-text-input", inputs: ["props"] }, { kind: "component", type: CheckInputComponent, selector: "val-check-input" }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }, { kind: "component", type: HintComponent, selector: "val-hint", inputs: ["props"] }, { kind: "component", type: CommentInputComponent, selector: "val-comment-input", inputs: ["props"] }, { kind: "component", type: DateInputComponent, selector: "val-date-input", inputs: ["props"] }, { kind: "component", type: FileInputComponent, selector: "val-file-input", inputs: ["props"] }, { kind: "component", type: HourInputComponent, selector: "val-hour-input", inputs: ["props"] }, { kind: "component", type: EmailInputComponent, selector: "val-email-input", inputs: ["props"] }, { kind: "component", type: NumberInputComponent, selector: "val-number-input", inputs: ["props"] }, { kind: "component", type: RadioInputComponent, selector: "val-radio-input", inputs: ["props"] }, { kind: "component", type: PasswordInputComponent, selector: "val-password-input", inputs: ["props"] }, { kind: "component", type: PinInputComponent, selector: "val-pin-input", inputs: ["props"] }, { kind: "component", type: SelectSearchComponent, selector: "val-select-search", inputs: ["label", "labelProperty", "valueProperty", "multiple", "placeholder", "props"] }, { kind: "component", type: SearchSelectorComponent, selector: "val-select-input", inputs: ["props"] }] }); }
+  `, isInline: true, styles: [":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)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextInputComponent, selector: "val-text-input", inputs: ["props"] }, { kind: "component", type: CheckInputComponent, selector: "val-check-input" }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }, { kind: "component", type: HintComponent, selector: "val-hint", inputs: ["props"] }, { kind: "component", type: CommentInputComponent, selector: "val-comment-input", inputs: ["props"] }, { kind: "component", type: DateInputComponent, selector: "val-date-input", inputs: ["props"] }, { kind: "component", type: FileInputComponent, selector: "val-file-input", inputs: ["props"] }, { kind: "component", type: HourInputComponent, selector: "val-hour-input", inputs: ["props"] }, { kind: "component", type: EmailInputComponent, selector: "val-email-input", inputs: ["props"] }, { kind: "component", type: NumberInputComponent, selector: "val-number-input", inputs: ["props"] }, { kind: "component", type: RadioInputComponent, selector: "val-radio-input", inputs: ["props"] }, { kind: "component", type: PasswordInputComponent, selector: "val-password-input", inputs: ["props"] }, { kind: "component", type: PinInputComponent, selector: "val-pin-input", inputs: ["props"] }, { kind: "component", type: SelectSearchComponent, selector: "val-select-search", inputs: ["label", "labelProperty", "valueProperty", "multiple", "placeholder", "props"] }, { kind: "component", type: SearchSelectorComponent, selector: "val-select-input", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
@@ -5057,7 +5302,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       </form>
     </div>
   `, styles: [":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)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: i0.ElementRef }], propDecorators: { props: [{
+        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i0.ElementRef }], propDecorators: { props: [{
                 type: Input
             }], onSubmit: [{
                 type: Output
@@ -6259,905 +6504,142 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }] });
 
 /**
- * Comprehensive example demonstrating global content usage.
- *
- * This component shows:
- * 1. Global button texts
- * 2. Global state messages
- * 3. Global confirmations with interpolation
- * 4. Mixing global and component-specific content
- * 5. Language switching
+ * LinkProcessingExampleComponent - Componente de ejemplo que demuestra el procesamiento automático de enlaces.
+ *
+ * Este componente muestra diferentes casos de uso para el procesamiento automático de enlaces
+ * en el componente val-text, incluyendo enlaces externos, rutas internas y configuraciones personalizadas.
+ *
+ * @example Uso en template:
+ * ```html
+ * <val-link-processing-example></val-link-processing-example>
+ * ```
  */
-class GlobalContentExampleComponent {
+class LinkProcessingExampleComponent {
     constructor() {
-        this.content = inject(ContentService);
-        this.componentContent = this.content.forComponent('GlobalContentExample');
-        // Form data
-        this.formData = {
-            name: '',
-            email: '',
-            message: '',
-        };
-        // Action state
-        this.actionPerformed = false;
-        // Component-specific content properties
-        this.titleProps = {
-            contentKey: 'title',
-            contentClass: 'GlobalContentExample',
-            contentFallback: 'Global Content Example',
-            color: 'primary',
-            size: 'xlarge',
-            bold: true,
-        };
-        this.languageLabel = {
-            contentKey: 'languageLabel',
-            contentClass: 'GlobalContentExample',
-            contentFallback: 'Language:',
-            color: 'medium',
+        this.basicTextProps = {
+            content: 'Este texto contiene https://angular.io y /dashboard pero no se procesan como enlaces.',
             size: 'medium',
-            bold: true,
+            color: 'dark',
+            bold: false,
+            processLinks: false,
         };
-        this.componentDescriptionProps = {
-            contentKey: 'description',
-            contentClass: 'GlobalContentExample',
-            contentFallback: 'This example demonstrates global and component-specific content.',
+        this.basicLinksProps = {
+            content: 'Visita https://angular.io para documentación o ve a /dashboard para el panel principal.',
+            size: 'medium',
             color: 'dark',
+            bold: false,
+            processLinks: true,
+        };
+        this.customLinksProps = {
+            content: 'Enlaces personalizados: https://github.com/angular/angular y /profile/settings',
             size: 'medium',
+            color: 'dark',
             bold: false,
+            processLinks: true,
+            linkConfig: {
+                openExternalInNewTab: true,
+                openInternalInNewTab: false,
+                linkClass: 'custom-link-style',
+                externalLinkClass: 'external-custom',
+                internalLinkClass: 'internal-custom',
+            },
         };
-        // Global button content (reactive)
-        this.saveButton$ = this.content.fromContent({ key: 'save' });
-        this.editButton$ = this.content.fromContent({ key: 'edit' });
-        this.deleteButton$ = this.content.fromContent({ key: 'delete' });
-        this.cancelButton$ = this.content.fromContent({ key: 'cancel' });
-        this.backButton$ = this.content.fromContent({ key: 'back' });
-        this.nextButton$ = this.content.fromContent({ key: 'next' });
-        this.okButton$ = this.content.fromContent({ key: 'ok' });
-        this.closeButton$ = this.content.fromContent({ key: 'close' });
-        // Global action content
-        this.addButton$ = this.content.fromContent({ key: 'add' });
-        this.removeButton$ = this.content.fromContent({ key: 'remove' });
-        this.searchButton$ = this.content.fromContent({ key: 'search' });
-        this.filterButton$ = this.content.fromContent({ key: 'filter' });
-        this.sortButton$ = this.content.fromContent({ key: 'sort' });
-        this.refreshButton$ = this.content.fromContent({ key: 'refresh' });
-        // Global state content
-        this.loadingText$ = this.content.fromContent({ key: 'loading' });
-        this.successText$ = this.content.fromContent({ key: 'success' });
-        this.errorText$ = this.content.fromContent({ key: 'error' });
-        this.warningText$ = this.content.fromContent({ key: 'warning' });
-        this.infoText$ = this.content.fromContent({ key: 'info' });
-        this.noDataText$ = this.content.fromContent({ key: 'noData' });
-        // Global form content
-        this.requiredText$ = this.content.fromContent({ key: 'required' });
-        this.optionalText$ = this.content.fromContent({ key: 'optional' });
-        this.searchPlaceholder$ = this.content.fromContent({ key: 'searchPlaceholder' });
-        // Global confirmation content with interpolation
-        this.deleteConfirmation$ = this.content.fromContentWithInterpolation({
-            key: 'deleteConfirmation',
-            interpolation: { itemName: 'este registro' },
-        });
-        this.areYouSureText$ = this.content.fromContent({ key: 'areYouSure' });
-        this.unsavedChangesText$ = this.content.fromContent({ key: 'unsavedChanges' });
-    }
-    /**
-     * Set language
-     */
-    setLanguage(lang) {
-        this.content.setLang(lang);
-    }
-    /**
-     * Perform an action to demonstrate status messages
-     */
-    performAction() {
-        this.actionPerformed = true;
-        setTimeout(() => {
-            this.actionPerformed = false;
-        }, 3000);
-    }
-    /**
-     * Cancel action
-     */
-    cancelAction() {
-        this.formData = { name: '', email: '', message: '' };
-        this.actionPerformed = false;
-    }
-    /**
-     * Example of synchronous global content access
-     */
-    getOkTextSync() {
-        return this.content.getGlobalText('ok');
-    }
-    /**
-     * Example of synchronous global content access using getText
-     */
-    getCancelTextSync() {
-        return this.content.getText('cancel');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GlobalContentExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GlobalContentExampleComponent, isStandalone: true, selector: "val-global-content-example", ngImport: i0, template: `
-    <ion-card>
-      <ion-card-header>
-        <ion-card-title>
-          <val-text [props]="titleProps"></val-text>
-        </ion-card-title>
-      </ion-card-header>
-
-      <ion-card-content>
-        <!-- Language switcher -->
-        <div class="language-section">
-          <val-text [props]="languageLabel"></val-text>
-          <ion-button fill="outline" size="small" (click)="setLanguage('es')"> Español </ion-button>
-          <ion-button fill="outline" size="small" (click)="setLanguage('en')"> English </ion-button>
-        </div>
-
-        <div class="divider"></div>
-
-        <!-- Global buttons demonstration -->
-        <div class="section">
-          <h3>Global Buttons</h3>
-          <div class="button-grid">
-            <ion-button color="primary">{{ saveButton$ | async }}</ion-button>
-            <ion-button color="secondary">{{ editButton$ | async }}</ion-button>
-            <ion-button color="danger">{{ deleteButton$ | async }}</ion-button>
-            <ion-button fill="outline">{{ cancelButton$ | async }}</ion-button>
-            <ion-button fill="outline">{{ backButton$ | async }}</ion-button>
-            <ion-button fill="outline">{{ nextButton$ | async }}</ion-button>
-            <ion-button color="success">{{ okButton$ | async }}</ion-button>
-            <ion-button fill="clear">{{ closeButton$ | async }}</ion-button>
-          </div>
-        </div>
-
-        <div class="divider"></div>
-
-        <!-- Global actions demonstration -->
-        <div class="section">
-          <h3>Global Actions</h3>
-          <div class="button-grid">
-            <ion-button size="small">{{ addButton$ | async }}</ion-button>
-            <ion-button size="small">{{ removeButton$ | async }}</ion-button>
-            <ion-button size="small">{{ searchButton$ | async }}</ion-button>
-            <ion-button size="small">{{ filterButton$ | async }}</ion-button>
-            <ion-button size="small">{{ sortButton$ | async }}</ion-button>
-            <ion-button size="small">{{ refreshButton$ | async }}</ion-button>
-          </div>
-        </div>
-
-        <div class="divider"></div>
-
-        <!-- Global states demonstration -->
-        <div class="section">
-          <h3>Global States</h3>
-          <div class="state-messages">
-            <div class="state-item loading">
-              <val-text
-                [props]="{ content: loadingText$ | async, color: 'medium', size: 'small', bold: false }"
-              ></val-text>
-            </div>
-            <div class="state-item success">
-              <val-text
-                [props]="{ content: successText$ | async, color: 'success', size: 'small', bold: false }"
-              ></val-text>
-            </div>
-            <div class="state-item error">
-              <val-text
-                [props]="{ content: errorText$ | async, color: 'danger', size: 'small', bold: false }"
-              ></val-text>
-            </div>
-            <div class="state-item warning">
-              <val-text
-                [props]="{ content: warningText$ | async, color: 'warning', size: 'small', bold: false }"
-              ></val-text>
-            </div>
-            <div class="state-item info">
-              <val-text
-                [props]="{ content: infoText$ | async, color: 'primary', size: 'small', bold: false }"
-              ></val-text>
-            </div>
-            <div class="state-item no-data">
-              <val-text
-                [props]="{ content: noDataText$ | async, color: 'medium', size: 'small', bold: false }"
-              ></val-text>
-            </div>
-          </div>
-        </div>
-
-        <div class="divider"></div>
-
-        <!-- Form with global placeholders and labels -->
-        <div class="section">
-          <h3>Form with Global Content</h3>
-          <form class="example-form">
-            <ion-item>
-              <ion-label position="stacked">Name ({{ requiredText$ | async }})</ion-label>
-              <ion-input [(ngModel)]="formData.name" [placeholder]="'Enter your name' + '...'" name="name"> </ion-input>
-            </ion-item>
-
-            <ion-item>
-              <ion-label position="stacked">Email ({{ optionalText$ | async }})</ion-label>
-              <ion-input [(ngModel)]="formData.email" [placeholder]="'Enter your email' + '...'" name="email">
-              </ion-input>
-            </ion-item>
-
-            <ion-item>
-              <ion-label position="stacked">Message</ion-label>
-              <ion-textarea [(ngModel)]="formData.message" [placeholder]="searchPlaceholder$ | async" name="message">
-              </ion-textarea>
-            </ion-item>
-          </form>
-        </div>
-
-        <div class="divider"></div>
-
-        <!-- Global confirmations with interpolation -->
-        <div class="section">
-          <h3>Confirmations with Interpolation</h3>
-          <div class="confirmation-examples">
-            <p><strong>Delete Confirmation:</strong></p>
-            <val-text
-              [props]="{ content: deleteConfirmation$ | async, color: 'danger', size: 'medium', bold: false }"
-            ></val-text>
-
-            <br /><br />
-            <p><strong>General Confirmation:</strong></p>
-            <val-text
-              [props]="{ content: areYouSureText$ | async, color: 'warning', size: 'medium', bold: false }"
-            ></val-text>
-
-            <br /><br />
-            <p><strong>Unsaved Changes:</strong></p>
-            <val-text
-              [props]="{ content: unsavedChangesText$ | async, color: 'medium', size: 'medium', bold: false }"
-            ></val-text>
-          </div>
-        </div>
-
-        <div class="divider"></div>
-
-        <!-- Mixed content: Global + Component specific -->
-        <div class="section">
-          <h3>Mixed Content Example</h3>
-          <div class="mixed-content">
-            <!-- Component-specific content -->
-            <val-text [props]="componentDescriptionProps"></val-text>
-
-            <br /><br />
-
-            <!-- Action buttons mixing global and component content -->
-            <div class="action-buttons">
-              <ion-button color="primary" (click)="performAction()">
-                {{ saveButton$ | async }}
-              </ion-button>
-              <ion-button fill="outline" (click)="cancelAction()">
-                {{ cancelButton$ | async }}
-              </ion-button>
-            </div>
-
-            <!-- Status message using global content -->
-            <div *ngIf="actionPerformed" class="status-message">
-              <val-text
-                [props]="{ content: successText$ | async, color: 'success', size: 'small', bold: false }"
-              ></val-text>
-            </div>
-          </div>
-        </div>
-
-        <!-- Demo of synchronous global content access -->
-        <div class="section">
-          <h3>Synchronous Access Example</h3>
-          <p>
-            OK button text (sync): <strong>{{ getOkTextSync() }}</strong>
-          </p>
-          <p>
-            Cancel button text (sync): <strong>{{ getCancelTextSync() }}</strong>
-          </p>
-        </div>
-      </ion-card-content>
-    </ion-card>
-  `, isInline: true, styles: [".language-section{display:flex;align-items:center;gap:8px;margin-bottom:16px}.divider{height:1px;background-color:var(--ion-color-light);margin:16px 0}.section{margin-bottom:16px}.section h3{margin:0 0 12px;color:var(--ion-color-primary)}.button-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}.state-messages{display:flex;flex-direction:column;gap:8px}.state-item{padding:8px;border-radius:4px;background-color:var(--ion-color-light-shade)}.state-item.loading{background-color:var(--ion-color-medium-tint)}.state-item.success{background-color:var(--ion-color-success-tint)}.state-item.error{background-color:var(--ion-color-danger-tint)}.state-item.warning{background-color:var(--ion-color-warning-tint)}.state-item.info{background-color:var(--ion-color-primary-tint)}.example-form{margin-top:12px}.confirmation-examples{padding:12px;background-color:var(--ion-color-light-tint);border-radius:8px}.mixed-content{padding:12px;background-color:var(--ion-color-light-shade);border-radius:8px}.action-buttons{display:flex;gap:8px;margin:12px 0}.status-message{padding:8px;background-color:var(--ion-color-success-tint);border-radius:4px;margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GlobalContentExampleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-global-content-example', standalone: true, imports: [
-                        CommonModule,
-                        FormsModule,
-                        IonCard,
-                        IonCardContent,
-                        IonCardHeader,
-                        IonCardTitle,
-                        IonButton,
-                        IonItem,
-                        IonLabel,
-                        IonInput,
-                        IonTextarea,
-                        TextComponent,
-                    ], template: `
-    <ion-card>
-      <ion-card-header>
-        <ion-card-title>
-          <val-text [props]="titleProps"></val-text>
-        </ion-card-title>
-      </ion-card-header>
-
-      <ion-card-content>
-        <!-- Language switcher -->
-        <div class="language-section">
-          <val-text [props]="languageLabel"></val-text>
-          <ion-button fill="outline" size="small" (click)="setLanguage('es')"> Español </ion-button>
-          <ion-button fill="outline" size="small" (click)="setLanguage('en')"> English </ion-button>
-        </div>
-
-        <div class="divider"></div>
-
-        <!-- Global buttons demonstration -->
-        <div class="section">
-          <h3>Global Buttons</h3>
-          <div class="button-grid">
-            <ion-button color="primary">{{ saveButton$ | async }}</ion-button>
-            <ion-button color="secondary">{{ editButton$ | async }}</ion-button>
-            <ion-button color="danger">{{ deleteButton$ | async }}</ion-button>
-            <ion-button fill="outline">{{ cancelButton$ | async }}</ion-button>
-            <ion-button fill="outline">{{ backButton$ | async }}</ion-button>
-            <ion-button fill="outline">{{ nextButton$ | async }}</ion-button>
-            <ion-button color="success">{{ okButton$ | async }}</ion-button>
-            <ion-button fill="clear">{{ closeButton$ | async }}</ion-button>
-          </div>
-        </div>
-
-        <div class="divider"></div>
-
-        <!-- Global actions demonstration -->
-        <div class="section">
-          <h3>Global Actions</h3>
-          <div class="button-grid">
-            <ion-button size="small">{{ addButton$ | async }}</ion-button>
-            <ion-button size="small">{{ removeButton$ | async }}</ion-button>
-            <ion-button size="small">{{ searchButton$ | async }}</ion-button>
-            <ion-button size="small">{{ filterButton$ | async }}</ion-button>
-            <ion-button size="small">{{ sortButton$ | async }}</ion-button>
-            <ion-button size="small">{{ refreshButton$ | async }}</ion-button>
-          </div>
-        </div>
-
-        <div class="divider"></div>
-
-        <!-- Global states demonstration -->
-        <div class="section">
-          <h3>Global States</h3>
-          <div class="state-messages">
-            <div class="state-item loading">
-              <val-text
-                [props]="{ content: loadingText$ | async, color: 'medium', size: 'small', bold: false }"
-              ></val-text>
-            </div>
-            <div class="state-item success">
-              <val-text
-                [props]="{ content: successText$ | async, color: 'success', size: 'small', bold: false }"
-              ></val-text>
-            </div>
-            <div class="state-item error">
-              <val-text
-                [props]="{ content: errorText$ | async, color: 'danger', size: 'small', bold: false }"
-              ></val-text>
-            </div>
-            <div class="state-item warning">
-              <val-text
-                [props]="{ content: warningText$ | async, color: 'warning', size: 'small', bold: false }"
-              ></val-text>
-            </div>
-            <div class="state-item info">
-              <val-text
-                [props]="{ content: infoText$ | async, color: 'primary', size: 'small', bold: false }"
-              ></val-text>
-            </div>
-            <div class="state-item no-data">
-              <val-text
-                [props]="{ content: noDataText$ | async, color: 'medium', size: 'small', bold: false }"
-              ></val-text>
-            </div>
-          </div>
-        </div>
-
-        <div class="divider"></div>
-
-        <!-- Form with global placeholders and labels -->
-        <div class="section">
-          <h3>Form with Global Content</h3>
-          <form class="example-form">
-            <ion-item>
-              <ion-label position="stacked">Name ({{ requiredText$ | async }})</ion-label>
-              <ion-input [(ngModel)]="formData.name" [placeholder]="'Enter your name' + '...'" name="name"> </ion-input>
-            </ion-item>
-
-            <ion-item>
-              <ion-label position="stacked">Email ({{ optionalText$ | async }})</ion-label>
-              <ion-input [(ngModel)]="formData.email" [placeholder]="'Enter your email' + '...'" name="email">
-              </ion-input>
-            </ion-item>
-
-            <ion-item>
-              <ion-label position="stacked">Message</ion-label>
-              <ion-textarea [(ngModel)]="formData.message" [placeholder]="searchPlaceholder$ | async" name="message">
-              </ion-textarea>
-            </ion-item>
-          </form>
-        </div>
-
-        <div class="divider"></div>
-
-        <!-- Global confirmations with interpolation -->
-        <div class="section">
-          <h3>Confirmations with Interpolation</h3>
-          <div class="confirmation-examples">
-            <p><strong>Delete Confirmation:</strong></p>
-            <val-text
-              [props]="{ content: deleteConfirmation$ | async, color: 'danger', size: 'medium', bold: false }"
-            ></val-text>
-
-            <br /><br />
-            <p><strong>General Confirmation:</strong></p>
-            <val-text
-              [props]="{ content: areYouSureText$ | async, color: 'warning', size: 'medium', bold: false }"
-            ></val-text>
-
-            <br /><br />
-            <p><strong>Unsaved Changes:</strong></p>
-            <val-text
-              [props]="{ content: unsavedChangesText$ | async, color: 'medium', size: 'medium', bold: false }"
-            ></val-text>
-          </div>
-        </div>
-
-        <div class="divider"></div>
-
-        <!-- Mixed content: Global + Component specific -->
-        <div class="section">
-          <h3>Mixed Content Example</h3>
-          <div class="mixed-content">
-            <!-- Component-specific content -->
-            <val-text [props]="componentDescriptionProps"></val-text>
-
-            <br /><br />
-
-            <!-- Action buttons mixing global and component content -->
-            <div class="action-buttons">
-              <ion-button color="primary" (click)="performAction()">
-                {{ saveButton$ | async }}
-              </ion-button>
-              <ion-button fill="outline" (click)="cancelAction()">
-                {{ cancelButton$ | async }}
-              </ion-button>
-            </div>
-
-            <!-- Status message using global content -->
-            <div *ngIf="actionPerformed" class="status-message">
-              <val-text
-                [props]="{ content: successText$ | async, color: 'success', size: 'small', bold: false }"
-              ></val-text>
-            </div>
-          </div>
-        </div>
-
-        <!-- Demo of synchronous global content access -->
-        <div class="section">
-          <h3>Synchronous Access Example</h3>
-          <p>
-            OK button text (sync): <strong>{{ getOkTextSync() }}</strong>
-          </p>
-          <p>
-            Cancel button text (sync): <strong>{{ getCancelTextSync() }}</strong>
-          </p>
-        </div>
-      </ion-card-content>
-    </ion-card>
-  `, styles: [".language-section{display:flex;align-items:center;gap:8px;margin-bottom:16px}.divider{height:1px;background-color:var(--ion-color-light);margin:16px 0}.section{margin-bottom:16px}.section h3{margin:0 0 12px;color:var(--ion-color-primary)}.button-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}.state-messages{display:flex;flex-direction:column;gap:8px}.state-item{padding:8px;border-radius:4px;background-color:var(--ion-color-light-shade)}.state-item.loading{background-color:var(--ion-color-medium-tint)}.state-item.success{background-color:var(--ion-color-success-tint)}.state-item.error{background-color:var(--ion-color-danger-tint)}.state-item.warning{background-color:var(--ion-color-warning-tint)}.state-item.info{background-color:var(--ion-color-primary-tint)}.example-form{margin-top:12px}.confirmation-examples{padding:12px;background-color:var(--ion-color-light-tint);border-radius:8px}.mixed-content{padding:12px;background-color:var(--ion-color-light-shade);border-radius:8px}.action-buttons{display:flex;gap:8px;margin:12px 0}.status-message{padding:8px;background-color:var(--ion-color-success-tint);border-radius:4px;margin-top:8px}\n"] }]
-        }] });
-
-/**
- * Reactive Content Example Component
- *
- * This component demonstrates various ways to use the new reactive content system with ContentService:
- * 1. Direct reactive content binding with val-text
- * 2. Content with interpolation (dynamic values)
- * 3. Multiple content keys retrieved at once
- * 4. Using the scoped content helper (forComponent)
- * 5. Language switching functionality
- *
- * The component automatically updates all text when the language changes,
- * using the simplified ContentService API that eliminates the need for manual
- * LangService injection and utility function imports.
- *
- * @example Usage patterns:
- * ```typescript
- * // Simple injection
- * content = inject(ContentService);
- *
- * // Scoped helper for this component
- * componentContent = this.content.forComponent('MyComponent');
- *
- * // Get reactive content
- * title$ = this.componentContent.get('title');
- * multipleTexts$ = this.componentContent.getMultiple(['title', 'subtitle']);
- * ```
- * without requiring manual subscriptions or change detection triggers.
- */
-class ReactiveContentExampleComponent {
-    constructor() {
-        // Use the new ContentService with inject
-        this.content = inject(ContentService);
-        // Create a scoped content helper for this component
-        this.componentContent = this.content.forComponent('ReactiveContentExample');
-        // State for confirmation dialog
-        this.showConfirmation = false;
-        // Example 1: Simple reactive content props for val-text
-        this.titleProps = {
-            contentKey: 'title',
-            contentClass: 'ReactiveContentExample',
-            contentFallback: 'Default Title',
-            color: 'primary',
-            size: 'xlarge',
-            bold: true,
+        this.mixedLinksProps = {
+            content: 'Consulta la documentación en https://ionicframework.com/docs, revisa el código en https://github.com/ionic-team/ionic-framework, o navega a /components/buttons para ejemplos internos.',
+            size: 'medium',
+            color: 'dark',
+            bold: false,
+            processLinks: true,
+            linkConfig: {
+                openExternalInNewTab: true,
+                openInternalInNewTab: false,
+                linkClass: 'processed-link',
+                externalLinkClass: 'external-link',
+                internalLinkClass: 'internal-link',
+            },
         };
-        // Example 2: Reactive content with interpolation
-        this.greetingProps = {
-            contentKey: 'greeting',
-            contentClass: 'ReactiveContentExample',
-            contentInterpolation: { name: 'Developer', count: 3 },
-            contentFallback: 'Hello Developer',
-            color: 'secondary',
-            size: 'large',
+        this.sameTabLinksProps = {
+            content: 'Estos enlaces no abren en nueva pestaña: https://example.com y /home',
+            size: 'medium',
+            color: 'dark',
             bold: false,
+            processLinks: true,
+            linkConfig: {
+                openExternalInNewTab: false,
+                openInternalInNewTab: false,
+                linkClass: 'same-tab-link',
+                externalLinkClass: 'external-same-tab',
+                internalLinkClass: 'internal-same-tab',
+            },
         };
     }
-    ngOnInit() {
-        // Set up reactive observables using ContentService
-        this.currentLanguage$ = this.content.currentLang$;
-        // Example 3: Get multiple content keys reactively - using the new API
-        this.multipleContent$ = this.componentContent.getMultiple(['description', 'dynamicText']);
-        // Button text reactive - using the new simplified API with options
-        this.buttonText$ = this.componentContent.get('buttonText');
-        // Global content observables using unified fromContent method
-        this.saveButton$ = this.content.fromContent({ key: 'save' });
-        this.cancelButton$ = this.content.fromContent({ key: 'cancel' });
-        this.deleteButton$ = this.content.fromContent({ key: 'delete' });
-        this.okButton$ = this.content.fromContent({ key: 'ok' });
-        this.loadingText$ = this.content.fromContent({ key: 'loading' });
-        // Global content with interpolation using unified method
-        this.deleteConfirmationText$ = this.content.fromContent({
-            key: 'deleteConfirmation',
-            interpolation: { itemName: 'este elemento' },
-        });
-        // Example of synchronous global content access
-        console.log('Global save text:', this.content.getText('save'));
-        console.log('Global cancel text:', this.content.getGlobalText('cancel'));
-        // Example of using new scoped helper with interpolation
-        const greetingWithNewAPI$ = this.componentContent.get('greeting', {
-            interpolation: { name: 'Developer', count: 3 },
-            fallback: 'Hello!',
-        });
-        console.log('New unified API works!', greetingWithNewAPI$);
-    }
-    /**
-     * Toggle between Spanish and English
-     */
-    toggleLanguage() {
-        const currentLang = this.content.currentLang;
-        const newLang = currentLang === LangOption.ES ? LangOption.EN : LangOption.ES;
-        this.content.setLang(newLang);
-    }
-    /**
-     * Show delete confirmation dialog
-     */
-    showDeleteConfirmation() {
-        this.showConfirmation = true;
-    }
-    /**
-     * Hide delete confirmation dialog
-     */
-    hideDeleteConfirmation() {
-        this.showConfirmation = false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactiveContentExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReactiveContentExampleComponent, isStandalone: true, selector: "val-reactive-content-example", ngImport: i0, template: `
-    <ion-card>
-      <ion-card-header>
-        <ion-card-title>
-          <!-- Example 1: Direct reactive content using val-text -->
-          <val-text [props]="titleProps"></val-text>
-        </ion-card-title>
-      </ion-card-header>
+    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: `
+    <div class="link-examples">
+      <h2>Ejemplos de Procesamiento de Enlaces</h2>
 
-      <ion-card-content>
-        <!-- Example 2: Reactive content with interpolation -->
-        <val-text [props]="greetingProps"></val-text>
-
-        <div class="example-divider"></div>
-
-        <!-- Example 3: Multiple content keys -->
-        <div *ngIf="multipleContent$ | async as content">
-          <val-text
-            [props]="{
-              content: content['description'],
-              color: 'medium',
-              size: 'medium',
-              bold: false,
-            }"
-          ></val-text>
-
-          <br /><br />
-
-          <val-text
-            [props]="{
-              content: content['dynamicText'],
-              color: 'primary',
-              size: 'small',
-              bold: true,
-            }"
-          ></val-text>
-        </div>
-
-        <div class="example-divider"></div>
-
-        <!-- Example 4: Using content helper -->
-        <val-text
-          [props]="{
-            content: componentContent.getText('welcomeMessage'),
-            color: 'success',
-            size: 'large',
-            bold: true,
-          }"
-        ></val-text>
-
-        <div class="example-divider"></div>
-
-        <!-- Example 5: Global content - buttons using global text -->
-        <div class="button-group">
-          <ion-button [fill]="'solid'" [color]="'primary'">
-            {{ saveButton$ | async }}
-          </ion-button>
-          <ion-button [fill]="'outline'" [color]="'secondary'">
-            {{ cancelButton$ | async }}
-          </ion-button>
-          <ion-button [fill]="'outline'" [color]="'danger'" (click)="showDeleteConfirmation()">
-            {{ deleteButton$ | async }}
-          </ion-button>
-        </div>
-
-        <div class="example-divider"></div>
-
-        <!-- Example 6: Global content with interpolation -->
-        <div *ngIf="showConfirmation" class="confirmation-message">
-          <val-text
-            [props]="{
-              content: deleteConfirmationText$ | async,
-              color: 'warning',
-              size: 'medium',
-              bold: true,
-            }"
-          ></val-text>
-          <br /><br />
-          <ion-button [fill]="'solid'" [color]="'danger'" size="small" (click)="hideDeleteConfirmation()">
-            {{ okButton$ | async }}
-          </ion-button>
-          <ion-button [fill]="'clear'" [color]="'medium'" size="small" (click)="hideDeleteConfirmation()">
-            {{ cancelButton$ | async }}
-          </ion-button>
-        </div>
+      <div class="example-section">
+        <h3>Texto sin procesamiento de enlaces:</h3>
+        <val-text [props]="basicTextProps"></val-text>
+      </div>
 
-        <div class="example-divider"></div>
+      <div class="example-section">
+        <h3>Texto con procesamiento básico de enlaces:</h3>
+        <val-text [props]="basicLinksProps"></val-text>
+      </div>
 
-        <!-- Example 7: Language switching button -->
-        <ion-button expand="block" fill="outline" color="tertiary" (click)="toggleLanguage()">
-          {{ buttonText$ | async }}
-        </ion-button>
+      <div class="example-section">
+        <h3>Enlaces con configuración personalizada:</h3>
+        <val-text [props]="customLinksProps"></val-text>
+      </div>
 
-        <!-- Example 8: Current language display -->
-        <div class="language-info">
-          <p>
-            Current language:
-            <strong>{{ currentLanguage$ | async }}</strong>
-          </p>
+      <div class="example-section">
+        <h3>Enlaces internos y externos mezclados:</h3>
+        <val-text [props]="mixedLinksProps"></val-text>
+      </div>
 
-          <!-- Example of mixed global and component content -->
-          <p>
-            <val-text
-              [props]="{
-                content: loadingText$ | async,
-                color: 'medium',
-                size: 'small',
-                bold: false,
-              }"
-            ></val-text>
-          </p>
-        </div>
-      </ion-card-content>
-    </ion-card>
-  `, isInline: true, styles: [":host{display:block;margin:16px}.example-divider{margin:24px 0;border-bottom:1px solid var(--ion-color-light);padding-bottom:16px}.language-info{margin-top:24px;padding:16px;background-color:var(--ion-color-light);border-radius:8px;text-align:center}.language-info p{margin:0;color:var(--ion-color-dark)}.language-info strong{color:var(--ion-color-primary);text-transform:uppercase}ion-card{margin:0;border-radius:12px;box-shadow:0 4px 16px #0000001a}ion-card-header{padding-bottom:8px}ion-card-title{font-size:1.5rem;font-weight:600}ion-card-content{padding-top:16px}ion-button{margin:16px 0;--border-radius: 8px}ion-card-content{padding:20px}.language-info{margin-top:16px;padding:12px;background-color:var(--ion-color-light);border-radius:8px;text-align:center}.content-section{margin:16px 0;padding:12px;border:1px solid var(--ion-color-light);border-radius:8px}.content-section h3{margin-top:0;color:var(--ion-color-primary)}.example-divider{margin:24px 0;height:1px;background-color:var(--ion-color-light)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+      <div class="example-section">
+        <h3>Enlaces sin abrir en nueva pestaña:</h3>
+        <val-text [props]="sameTabLinksProps"></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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactiveContentExampleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkProcessingExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-reactive-content-example', standalone: true, imports: [AsyncPipe, NgIf, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonButton, TextComponent], template: `
-    <ion-card>
-      <ion-card-header>
-        <ion-card-title>
-          <!-- Example 1: Direct reactive content using val-text -->
-          <val-text [props]="titleProps"></val-text>
-        </ion-card-title>
-      </ion-card-header>
-
-      <ion-card-content>
-        <!-- Example 2: Reactive content with interpolation -->
-        <val-text [props]="greetingProps"></val-text>
-
-        <div class="example-divider"></div>
-
-        <!-- Example 3: Multiple content keys -->
-        <div *ngIf="multipleContent$ | async as content">
-          <val-text
-            [props]="{
-              content: content['description'],
-              color: 'medium',
-              size: 'medium',
-              bold: false,
-            }"
-          ></val-text>
-
-          <br /><br />
-
-          <val-text
-            [props]="{
-              content: content['dynamicText'],
-              color: 'primary',
-              size: 'small',
-              bold: true,
-            }"
-          ></val-text>
-        </div>
-
-        <div class="example-divider"></div>
-
-        <!-- Example 4: Using content helper -->
-        <val-text
-          [props]="{
-            content: componentContent.getText('welcomeMessage'),
-            color: 'success',
-            size: 'large',
-            bold: true,
-          }"
-        ></val-text>
-
-        <div class="example-divider"></div>
-
-        <!-- Example 5: Global content - buttons using global text -->
-        <div class="button-group">
-          <ion-button [fill]="'solid'" [color]="'primary'">
-            {{ saveButton$ | async }}
-          </ion-button>
-          <ion-button [fill]="'outline'" [color]="'secondary'">
-            {{ cancelButton$ | async }}
-          </ion-button>
-          <ion-button [fill]="'outline'" [color]="'danger'" (click)="showDeleteConfirmation()">
-            {{ deleteButton$ | async }}
-          </ion-button>
-        </div>
+            args: [{ selector: 'val-link-processing-example', standalone: true, imports: [TextComponent], template: `
+    <div class="link-examples">
+      <h2>Ejemplos de Procesamiento de Enlaces</h2>
 
-        <div class="example-divider"></div>
-
-        <!-- Example 6: Global content with interpolation -->
-        <div *ngIf="showConfirmation" class="confirmation-message">
-          <val-text
-            [props]="{
-              content: deleteConfirmationText$ | async,
-              color: 'warning',
-              size: 'medium',
-              bold: true,
-            }"
-          ></val-text>
-          <br /><br />
-          <ion-button [fill]="'solid'" [color]="'danger'" size="small" (click)="hideDeleteConfirmation()">
-            {{ okButton$ | async }}
-          </ion-button>
-          <ion-button [fill]="'clear'" [color]="'medium'" size="small" (click)="hideDeleteConfirmation()">
-            {{ cancelButton$ | async }}
-          </ion-button>
-        </div>
-
-        <div class="example-divider"></div>
-
-        <!-- Example 7: Language switching button -->
-        <ion-button expand="block" fill="outline" color="tertiary" (click)="toggleLanguage()">
-          {{ buttonText$ | async }}
-        </ion-button>
+      <div class="example-section">
+        <h3>Texto sin procesamiento de enlaces:</h3>
+        <val-text [props]="basicTextProps"></val-text>
+      </div>
 
-        <!-- Example 8: Current language display -->
-        <div class="language-info">
-          <p>
-            Current language:
-            <strong>{{ currentLanguage$ | async }}</strong>
-          </p>
+      <div class="example-section">
+        <h3>Texto con procesamiento básico de enlaces:</h3>
+        <val-text [props]="basicLinksProps"></val-text>
+      </div>
 
-          <!-- Example of mixed global and component content -->
-          <p>
-            <val-text
-              [props]="{
-                content: loadingText$ | async,
-                color: 'medium',
-                size: 'small',
-                bold: false,
-              }"
-            ></val-text>
-          </p>
-        </div>
-      </ion-card-content>
-    </ion-card>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;margin:16px}.example-divider{margin:24px 0;border-bottom:1px solid var(--ion-color-light);padding-bottom:16px}.language-info{margin-top:24px;padding:16px;background-color:var(--ion-color-light);border-radius:8px;text-align:center}.language-info p{margin:0;color:var(--ion-color-dark)}.language-info strong{color:var(--ion-color-primary);text-transform:uppercase}ion-card{margin:0;border-radius:12px;box-shadow:0 4px 16px #0000001a}ion-card-header{padding-bottom:8px}ion-card-title{font-size:1.5rem;font-weight:600}ion-card-content{padding-top:16px}ion-button{margin:16px 0;--border-radius: 8px}ion-card-content{padding:20px}.language-info{margin-top:16px;padding:12px;background-color:var(--ion-color-light);border-radius:8px;text-align:center}.content-section{margin:16px 0;padding:12px;border:1px solid var(--ion-color-light);border-radius:8px}.content-section h3{margin-top:0;color:var(--ion-color-primary)}.example-divider{margin:24px 0;height:1px;background-color:var(--ion-color-light)}\n"] }]
-        }], ctorParameters: () => [] });
+      <div class="example-section">
+        <h3>Enlaces con configuración personalizada:</h3>
+        <val-text [props]="customLinksProps"></val-text>
+      </div>
 
-/**
- * Content configuration for the Global Content Example component.
- *
- * This demonstrates component-specific content that works alongside
- * global content to create a comprehensive content management system.
- */
-const globalContentExampleData = {
-    title: {
-        es: 'Ejemplo de Contenido Global',
-        en: 'Global Content Example',
-    },
-    languageLabel: {
-        es: 'Idioma:',
-        en: 'Language:',
-    },
-    description: {
-        es: 'Este ejemplo demuestra cómo usar contenido global y específico del componente de manera conjunta.',
-        en: 'This example shows how to use global and component-specific content together.',
-    },
-};
-var GlobalContentExample = new TextContent(globalContentExampleData);
+      <div class="example-section">
+        <h3>Enlaces internos y externos mezclados:</h3>
+        <val-text [props]="mixedLinksProps"></val-text>
+      </div>
 
-/**
- * Example content configuration for demonstrating the reactive content system.
- *
- * This file shows how to structure content for components that use the reactive
- * language system with the new fromContent pattern.
- */
-// Example content for a sample component
-const exampleComponentContent = {
-    es: {
-        title: 'Ejemplo de Contenido Reactivo',
-        subtitle: 'Este es un subtítulo que cambia automáticamente',
-        description: 'Esta descripción se actualiza cuando cambias el idioma sin necesidad de recargar la página.',
-        greeting: 'Hola {name}, tienes {count} mensajes nuevos',
-        welcomeMessage: 'Bienvenido a la biblioteca de componentes Valtech',
-        dynamicText: 'Este texto se actualiza automáticamente cuando cambias el idioma',
-        buttonText: 'Cambiar Idioma',
-        loadingText: 'Cargando...',
-        errorMessage: 'Error: No se pudo cargar el contenido',
-        successMessage: 'Contenido cargado exitosamente',
-        confirmDialog: '¿Estás seguro de que quieres continuar?',
-        cancelButton: 'Cancelar',
-        acceptButton: 'Aceptar',
-    },
-    en: {
-        title: 'Reactive Content Example',
-        subtitle: 'This is a subtitle that changes automatically',
-        description: 'This description updates when you change the language without needing to reload the page.',
-        greeting: 'Hello {name}, you have {count} new messages',
-        welcomeMessage: 'Welcome to the Valtech component library',
-        dynamicText: 'This text updates automatically when you change the language',
-        buttonText: 'Change Language',
-        loadingText: 'Loading...',
-        errorMessage: 'Error: Could not load content',
-        successMessage: 'Content loaded successfully',
-        confirmDialog: 'Are you sure you want to continue?',
-        cancelButton: 'Cancel',
-        acceptButton: 'Accept',
-    },
-};
-// Export the content as a TextContent instance
-var ReactiveContentExample = new TextContent(exampleComponentContent);
+      <div class="example-section">
+        <h3>Enlaces sin abrir en nueva pestaña:</h3>
+        <val-text [props]="sameTabLinksProps"></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"] }]
+        }] });
 
-const text$1 = {
+const text = {
     es: {
         spanish: 'Español',
         english: 'Inglés',
@@ -7167,21 +6649,7 @@ const text$1 = {
         english: 'English',
     },
 };
-var LangSettings = new TextContent(text$1);
-
-const text = {
-    es: {
-        light: 'Siempre claro',
-        dark: 'Siempre oscuro',
-        auto: 'Automático',
-    },
-    en: {
-        light: 'Always light',
-        dark: 'Always dark',
-        auto: 'System settings',
-    },
-};
-var ThemeSettings = new TextContent(text);
+var LangSettings = new TextContent(text);
 
 /**
  * Global content that can be used across all components.
@@ -7220,9 +6688,6 @@ const globalContentData = {
         areYouSure: '¿Estás seguro?',
         deleteConfirmation: '¿Estás seguro de que deseas eliminar {itemName}?',
         unsavedChanges: 'Tienes cambios sin guardar. ¿Deseas continuar?',
-        // Common form labels
-        required: 'Requerido',
-        optional: 'Opcional',
         // Common placeholders
         searchPlaceholder: 'Buscar...',
     },
@@ -7257,9 +6722,6 @@ const globalContentData = {
         areYouSure: 'Are you sure?',
         deleteConfirmation: 'Are you sure you want to delete {itemName}?',
         unsavedChanges: 'You have unsaved changes. Do you want to continue?',
-        // Common form labels
-        required: 'Required',
-        optional: 'Optional',
         // Common placeholders
         searchPlaceholder: 'Search...',
     },
@@ -7268,9 +6730,6 @@ const GlobalContent = new TextContent(globalContentData);
 const content = {
     _global: GlobalContent,
     LangSettings,
-    ThemeSettings,
-    ReactiveContentExample,
-    GlobalContentExample,
 };
 
 /**
@@ -7328,5 +6787,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionType, AlertBoxComponent, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CardSection, CardType, CheckInputComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CommentInputComponent, ComponentStates, ContentLoaderComponent, ContentService, CustomContentDemoComponent, DateInputComponent, DisplayComponent, DividerComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FileInputComponent, FooterComponent, FormComponent, FormFooterComponent, GlobalContent, GlobalContentExampleComponent, HeaderComponent, HintComponent, HourInputComponent, HrefComponent, Icon, IconComponent, IconService, ImageComponent, InAppBrowserService, InputType, ItemListComponent, LangOption, LangService, LayeredCardComponent, LayoutComponent, LinkComponent, LinksCakeComponent, LocalStorageService, MOTION, NavigationService, NoContentComponent, NotesBoxComponent, NumberInputComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PasswordInputComponent, PinInputComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProgressBarComponent, ProgressStatusComponent, PrompterComponent, RadioInputComponent, ReactiveContentExampleComponent, SearchSelectorComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SelectSearchComponent, SimpleComponent, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, TextComponent, TextContent, TextInputComponent, ThemeOption, ThemeService, TitleBlockComponent, TitleComponent, ToastService, ToolbarActionType, ToolbarComponent, ValtechConfigService, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, content, createContentHelper, createTextProps, fromContent, fromContentWithInterpolation, fromMultipleContent, globalContentData, goToTop, interpolateContent, isAtEnd, maxLength, replaceSpecialChars, resolveColor, resolveInputDefaultValue };
+export { ActionType, AlertBoxComponent, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CardSection, CardType, CheckInputComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CommentInputComponent, ComponentStates, ContentLoaderComponent, ContentService, CustomContentDemoComponent, DateInputComponent, DisplayComponent, DividerComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FileInputComponent, FooterComponent, FormComponent, FormFooterComponent, GlobalContent, HeaderComponent, HintComponent, HourInputComponent, HrefComponent, Icon, IconComponent, IconService, ImageComponent, InAppBrowserService, InputType, ItemListComponent, LangOption, LangService, LayeredCardComponent, LayoutComponent, LinkComponent, LinkProcessingExampleComponent, LinkProcessorService, LinksCakeComponent, LocalStorageService, MOTION, NavigationService, NoContentComponent, NotesBoxComponent, NumberInputComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PasswordInputComponent, PinInputComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProcessLinksPipe, ProgressBarComponent, ProgressStatusComponent, PrompterComponent, RadioInputComponent, SearchSelectorComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SelectSearchComponent, SimpleComponent, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, TextComponent, TextContent, TextInputComponent, ThemeOption, ThemeService, TitleBlockComponent, TitleComponent, ToastService, ToolbarActionType, ToolbarComponent, ValtechConfigService, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, content, createContentHelper, createTextProps, fromContent, fromContentWithInterpolation, fromMultipleContent, globalContentData, goToTop, interpolateContent, isAtEnd, maxLength, replaceSpecialChars, resolveColor, resolveInputDefaultValue };
 //# sourceMappingURL=valtech-components.mjs.map