valtech-components 2.0.857 → 2.0.859

package/fesm2022/valtech-components.mjs

@@ -5,7 +5,7 @@ import { IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonModal,
 import * as i1 from '@angular/common';
 import { CommonModule, NgStyle, NgFor, isPlatformBrowser, DOCUMENT, NgClass } from '@angular/common';
 import { addIcons } from 'ionicons';
-import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, settings, settingsOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notifications, notificationsOutline, openOutline, closeOutline, chatbubblesOutline, shareOutline, heart, heartOutline, home, homeOutline, eyeOffOutline, eyeOutline, scanOutline, chevronDownOutline, chevronForwardOutline, checkmarkOutline, clipboardOutline, copyOutline, filterOutline, locationOutline, calendarOutline, businessOutline, logoTwitter, logoInstagram, logoLinkedin, logoYoutube, logoTiktok, logoFacebook, logoGoogle, createOutline, trashOutline, playOutline, phonePortraitOutline, refreshOutline, documentTextOutline, lockClosedOutline, informationCircleOutline, logoNpm, removeOutline, optionsOutline, personOutline, shieldCheckmarkOutline, keyOutline, desktopOutline, logOutOutline, cloudDownloadOutline, warningOutline, add, close, share, create, trash, star, camera, mic, send, downloadOutline, chevronDown, language, globeOutline, checkmark, list, grid, apps, menu, search, person, helpCircle, informationCircle, documentText, mail, calendar, folder, chevronForward, ellipsisHorizontal, chevronBack, playBack, playForward, ellipse, starOutline, starHalf, heartHalf, checkmarkCircle, timeOutline, flag, trendingUp, trendingDown, remove, analytics, people, cash, cart, eye, chatbubbleOutline, thumbsUpOutline, thumbsUp, happyOutline, happy, sadOutline, sad, chevronUp, pin, pencil, callOutline, logoWhatsapp, paperPlaneOutline, mailOutline, chevronDownCircleOutline, closeCircle, alertCircle, logoApple, logoMicrosoft, linkOutline, unlinkOutline, cloudOfflineOutline, documentOutline, chevronBackOutline, sendOutline, chatbubbleEllipsesOutline, swapVerticalOutline, chevronUpOutline, searchOutline, cartOutline, chatbubble, compass, compassOutline, gridOutline, listOutline, folderOutline, documents, documentsOutline, statsChart, statsChartOutline, cameraOutline, bugOutline, bulbOutline, closeCircleOutline, menuOutline } from 'ionicons/icons';
+import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, settings, settingsOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notifications, notificationsOutline, openOutline, closeOutline, chatbubblesOutline, shareOutline, heart, heartOutline, home, homeOutline, eyeOffOutline, eyeOutline, scanOutline, chevronDownOutline, chevronForwardOutline, checkmarkOutline, clipboardOutline, copyOutline, filterOutline, locationOutline, calendarOutline, businessOutline, logoTwitter, logoInstagram, logoLinkedin, logoYoutube, logoTiktok, logoFacebook, logoGoogle, createOutline, trashOutline, playOutline, peopleOutline, phonePortraitOutline, refreshOutline, documentTextOutline, lockClosedOutline, informationCircleOutline, logoNpm, removeOutline, optionsOutline, personOutline, shieldCheckmarkOutline, keyOutline, desktopOutline, logOutOutline, cloudDownloadOutline, warningOutline, add, close, share, create, trash, star, camera, mic, send, downloadOutline, chevronDown, language, globeOutline, checkmark, list, grid, apps, menu, search, person, helpCircle, informationCircle, documentText, mail, calendar, folder, chevronForward, ellipsisHorizontal, chevronBack, playBack, playForward, ellipse, starOutline, starHalf, heartHalf, checkmarkCircle, timeOutline, flag, trendingUp, trendingDown, remove, analytics, people, cash, cart, eye, chatbubbleOutline, thumbsUpOutline, thumbsUp, happyOutline, happy, sadOutline, sad, chevronUp, pin, pencil, callOutline, logoWhatsapp, paperPlaneOutline, mailOutline, chevronDownCircleOutline, closeCircle, alertCircle, logoApple, logoMicrosoft, linkOutline, unlinkOutline, cloudOfflineOutline, documentOutline, attachOutline, cameraOutline, closeCircleOutline, imageOutline, chevronBackOutline, sendOutline, chatbubbleEllipsesOutline, swapVerticalOutline, chevronUpOutline, searchOutline, cartOutline, chatbubble, compass, compassOutline, gridOutline, listOutline, folderOutline, documents, documentsOutline, statsChart, statsChartOutline, menuOutline } from 'ionicons/icons';
 import * as i1$1 from '@angular/router';
 import { RouterLink, Router, NavigationEnd, RouterOutlet, RouterModule } from '@angular/router';
 import { Browser } from '@capacitor/browser';
@@ -13,7 +13,7 @@ import * as i1$2 from '@angular/platform-browser';
 import { DomSanitizer, Meta, Title } from '@angular/platform-browser';
 import QRCodeStyling from 'qr-code-styling';
 import * as i1$3 from '@angular/forms';
-import { ReactiveFormsModule, FormsModule, FormControl, Validators, FormBuilder } from '@angular/forms';
+import { ReactiveFormsModule, FormsModule, FormControl, Validators } from '@angular/forms';
 import { BehaviorSubject, map, filter as filter$1, interval, throwError, Subject, distinctUntilChanged, take as take$1, firstValueFrom, of, from, EMPTY, Observable, debounceTime, switchMap as switchMap$1, catchError as catchError$1, takeUntil, isObservable, shareReplay, race, timer } from 'rxjs';
 import * as i1$4 from 'ng-otp-input';
 import { NgOtpInputComponent, NgOtpInputModule } from 'ng-otp-input';
@@ -41,7 +41,7 @@ import * as i1$7 from '@angular/fire/storage';
 import { provideStorage, getStorage, connectStorageEmulator, ref, uploadBytesResumable, getDownloadURL, getMetadata, deleteObject, listAll } from '@angular/fire/storage';
 import { filter, catchError, switchMap, finalize, take, map as map$1, tap, retry, timeout, debounceTime as debounceTime$1, takeUntil as takeUntil$1 } from 'rxjs/operators';
 import * as i1$8 from '@angular/common/http';
-import { provideHttpClient, withInterceptors, HttpErrorResponse, HttpClient } from '@angular/common/http';
+import { provideHttpClient, withInterceptors, HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { isSupported, getMessaging as getMessaging$1 } from 'firebase/messaging';
 import { getApps, getApp, initializeApp as initializeApp$1 } from 'firebase/app';
 import { ImageCropperComponent } from 'ngx-image-cropper';
@@ -53,7 +53,7 @@ import 'prismjs/components/prism-json';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '2.0.857';
+const VERSION = '2.0.859';
 
 /**
  * Servicio para gestionar presets de componentes.
@@ -347,6 +347,7 @@ class IconService {
             createOutline,
             trashOutline,
             playOutline,
+            peopleOutline,
             phonePortraitOutline,
             refreshOutline,
             documentTextOutline,
@@ -4043,6 +4044,11 @@ const VALTECH_DEFAULT_CONTENT = {
             feedbackType: 'Tipo de feedback',
             feedbackSuccess: 'Feedback enviado exitosamente',
             feedbackError: 'Error al enviar el feedback',
+            // Componentes - AttachmentUploader
+            attachAdd: 'Adjuntar archivo',
+            attachCamera: 'Usar cámara',
+            attachMaxCount: 'Límite de {count} archivos alcanzado',
+            attachUploadFailed: 'Error al subir el archivo',
             titlePlaceholder: 'Describe brevemente...',
             titleValidation: 'El título debe tener entre 5 y 200 caracteres',
             descriptionPlaceholder: 'Proporciona más detalles...',
@@ -4190,6 +4196,11 @@ const VALTECH_DEFAULT_CONTENT = {
             feedbackType: 'Feedback type',
             feedbackSuccess: 'Feedback sent successfully',
             feedbackError: 'Error sending feedback',
+            // Components - AttachmentUploader
+            attachAdd: 'Attach file',
+            attachCamera: 'Use camera',
+            attachMaxCount: 'Limit of {count} files reached',
+            attachUploadFailed: 'Error uploading file',
             titlePlaceholder: 'Describe briefly...',
             titleValidation: 'Title must be between 5 and 200 characters',
             descriptionPlaceholder: 'Provide more details...',
@@ -4403,6 +4414,10 @@ const VALTECH_DEFAULT_CONTENT = {
             mfaCodesCopied: 'Códigos copiados al portapapeles.',
             mfaSecretCopied: 'Secreto copiado al portapapeles.',
             mfaDisableTotpPrompt: 'Ingresá el código de tu app de autenticación para deshabilitar MFA.',
+            mfaDisableCodePrompt: 'Ingresá el código que enviamos a tu correo/teléfono para deshabilitar MFA.',
+            mfaDisableSendCode: 'Enviar código',
+            mfaDisableCodeSent: 'Código enviado. Revisá tu correo o teléfono.',
+            mfaDisableResendCode: 'Reenviar código',
             mfaDisableNeedsPassword: 'Esta cuenta no tiene contraseña. Primero seteá una desde "Olvidé mi contraseña" y luego volvé a deshabilitar MFA.',
             mfaErrorInvalidCode: 'Código incorrecto.',
             mfaErrorExpiredCode: 'El código ha expirado. Solicita uno nuevo.',
@@ -4562,6 +4577,10 @@ const VALTECH_DEFAULT_CONTENT = {
             mfaCodesCopied: 'Codes copied to clipboard.',
             mfaSecretCopied: 'Secret copied to clipboard.',
             mfaDisableTotpPrompt: 'Enter the code from your authenticator app to disable MFA.',
+            mfaDisableCodePrompt: 'Enter the code we sent to your email/phone to disable MFA.',
+            mfaDisableSendCode: 'Send code',
+            mfaDisableCodeSent: 'Code sent. Check your email or phone.',
+            mfaDisableResendCode: 'Resend code',
             mfaDisableNeedsPassword: 'This account has no password. Set one via "Forgot password" first, then come back to disable MFA.',
             mfaErrorInvalidCode: 'Incorrect code.',
             mfaErrorExpiredCode: 'The code has expired. Request a new one.',
@@ -14206,7 +14225,7 @@ class TextareaInputComponent {
         </ion-note>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block;width:100%}.textarea-container{position:relative}.textarea-container ion-textarea{--background: var(--ion-background-color, #fff);--padding-start: 12px;--padding-end: 12px;--padding-top: 12px;--padding-bottom: 12px}.textarea-container ion-textarea.no-resize textarea{resize:none!important}.textarea-container.has-error ion-textarea{--border-color: var(--ion-color-danger);--highlight-color: var(--ion-color-danger)}.char-counter{font-size:12px;color:var(--ion-color-medium);text-align:right;margin-top:4px;padding-right:4px}.char-counter.remaining{color:var(--ion-color-medium-shade)}.hint{display:block;font-size:12px;color:var(--ion-color-medium);margin-top:4px;padding-left:4px}.error-message{display:block;font-size:12px;margin-top:4px;padding-left:4px}ion-textarea::part(counter){font-size:12px;color:var(--ion-color-medium)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.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"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }] }); }
+  `, isInline: true, styles: [":host{display:block;width:100%}.textarea-container{position:relative}.textarea-container ion-textarea{--background: var(--ion-background-color, #fff);--padding-start: 12px;--padding-end: 12px;--padding-top: 12px;--padding-bottom: 12px}.textarea-container ion-textarea.no-resize textarea{resize:none!important}.textarea-container.has-error ion-textarea{--border-color: var(--ion-color-danger);--highlight-color: var(--ion-color-danger)}.char-counter{font-size:12px;color:var(--ion-color-medium);text-align:right;margin-top:4px;padding-right:4px}.char-counter.remaining{color:var(--ion-color-medium-shade)}.hint{display:block;font-size:12px;color:var(--ion-color-dark);margin-top:4px;padding-left:4px}.error-message{display:block;font-size:12px;margin-top:4px;padding-left:4px}ion-textarea::part(counter){font-size:12px;color:var(--ion-color-medium)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.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"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextareaInputComponent, decorators: [{
             type: Component,
@@ -14250,7 +14269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </ion-note>
       }
     </div>
-  `, styles: [":host{display:block;width:100%}.textarea-container{position:relative}.textarea-container ion-textarea{--background: var(--ion-background-color, #fff);--padding-start: 12px;--padding-end: 12px;--padding-top: 12px;--padding-bottom: 12px}.textarea-container ion-textarea.no-resize textarea{resize:none!important}.textarea-container.has-error ion-textarea{--border-color: var(--ion-color-danger);--highlight-color: var(--ion-color-danger)}.char-counter{font-size:12px;color:var(--ion-color-medium);text-align:right;margin-top:4px;padding-right:4px}.char-counter.remaining{color:var(--ion-color-medium-shade)}.hint{display:block;font-size:12px;color:var(--ion-color-medium);margin-top:4px;padding-left:4px}.error-message{display:block;font-size:12px;margin-top:4px;padding-left:4px}ion-textarea::part(counter){font-size:12px;color:var(--ion-color-medium)}\n"] }]
+  `, styles: [":host{display:block;width:100%}.textarea-container{position:relative}.textarea-container ion-textarea{--background: var(--ion-background-color, #fff);--padding-start: 12px;--padding-end: 12px;--padding-top: 12px;--padding-bottom: 12px}.textarea-container ion-textarea.no-resize textarea{resize:none!important}.textarea-container.has-error ion-textarea{--border-color: var(--ion-color-danger);--highlight-color: var(--ion-color-danger)}.char-counter{font-size:12px;color:var(--ion-color-medium);text-align:right;margin-top:4px;padding-right:4px}.char-counter.remaining{color:var(--ion-color-medium-shade)}.hint{display:block;font-size:12px;color:var(--ion-color-dark);margin-top:4px;padding-left:4px}.error-message{display:block;font-size:12px;margin-top:4px;padding-left:4px}ion-textarea::part(counter){font-size:12px;color:var(--ion-color-medium)}\n"] }]
         }], propDecorators: { preset: [{
                 type: Input
             }], props: [{
@@ -25867,6 +25886,11 @@ class AuthService {
             .post(`${this.baseUrl}/mfa/disable`, input)
             .pipe(catchError(error => this.handleAuthError(error)));
     }
+    sendMFADisableCode() {
+        return this.http
+            .post(`${this.baseUrl}/mfa/disable-code`, {})
+            .pipe(catchError(error => this.handleAuthError(error)));
+    }
     // =============================================
     // TOTP MFA (Google Authenticator)
     // =============================================
@@ -27653,196 +27677,758 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }] });
 
 /**
- * Configuración de espaciado predefinida
+ * Token de inyección para la configuración de Feedback.
  */
-const ARTICLE_SPACING = {
-    NONE: { top: 'none', bottom: 'none' },
-    SMALL: { top: 'small', bottom: 'small' },
-    MEDIUM: { top: 'medium', bottom: 'medium' },
-    LARGE: { top: 'large', bottom: 'large' },
-    XLARGE: { top: 'xlarge', bottom: 'xlarge' },
-    // Espaciados específicos para elementos
-    TITLE: { top: 'large', bottom: 'medium' },
-    SUBTITLE: { top: 'medium', bottom: 'small' },
-    PARAGRAPH: { top: 'small', bottom: 'medium' },
-    QUOTE: { top: 'medium', bottom: 'medium' },
-    CODE: { top: 'medium', bottom: 'medium' },
-    NOTE: { top: 'medium', bottom: 'medium' },
-    COMMAND: { top: 'medium', bottom: 'medium' },
-    LIST: { top: 'small', bottom: 'medium' },
-    BUTTON: { top: 'medium', bottom: 'medium' },
-    IMAGE: { top: 'large', bottom: 'large' },
-    SEPARATOR: { top: 'large', bottom: 'large' },
+const VALTECH_FEEDBACK_CONFIG = new InjectionToken('ValtechFeedbackConfig');
+/**
+ * Configuración por defecto.
+ */
+const DEFAULT_FEEDBACK_CONFIG = {
+    feedbackPrefix: '/v1/feedback',
+    maxAttachments: 5,
+    // Estándar acordado para adjuntos de feedback: solo imágenes (JPEG/PNG/WebP)
+    // y PDF, máx 5 MB. Reflejado en `storage.rules` (path `users/{uid}/feedback/`).
+    maxFileSize: 5 * 1024 * 1024,
+    allowedFileTypes: ['image/jpeg', 'image/png', 'image/webp', 'application/pdf'],
+    storagePath: 'feedback',
 };
 /**
- * Función helper para crear elementos de artículo de forma fácil
+ * Provee el servicio de feedback a la aplicación Angular.
+ *
+ * @param config - Configuración de feedback
+ * @returns EnvironmentProviders para usar en bootstrapApplication
+ *
+ * @example
+ * ```typescript
+ * // main.ts
+ * import { bootstrapApplication } from '@angular/platform-browser';
+ * import { provideValtechFeedback } from 'valtech-components';
+ * import { environment } from './environments/environment';
+ *
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideValtechAuth({ apiUrl: environment.apiUrl }),
+ *     provideValtechFeedback({
+ *       apiUrl: environment.apiUrl,
+ *       appId: 'my-app-name',
+ *     }),
+ *   ],
+ * });
+ * ```
  */
-class ArticleBuilder {
+function provideValtechFeedback(config) {
+    const mergedConfig = {
+        ...DEFAULT_FEEDBACK_CONFIG,
+        ...config,
+    };
+    return makeEnvironmentProviders([{ provide: VALTECH_FEEDBACK_CONFIG, useValue: mergedConfig }]);
+}
+
+/**
+ * Servicio para gestionar feedback de usuarios.
+ *
+ * @example
+ * ```typescript
+ * @Component({...})
+ * export class MyComponent {
+ *   private feedbackService = inject(FeedbackService);
+ *
+ *   async submitFeedback() {
+ *     const response = await this.feedbackService.createAsync(
+ *       'feedback',
+ *       'Mi comentario',
+ *       'Descripción detallada...'
+ *     );
+ *     console.log('Feedback enviado:', response.feedbackId);
+ *   }
+ * }
+ * ```
+ */
+class FeedbackService {
     constructor() {
-        this.elements = [];
+        this.config = inject(VALTECH_FEEDBACK_CONFIG);
+        this.http = inject(HttpClient);
+        this.firestore = inject(FirestoreService, { optional: true });
+        this.storage = inject(StorageService, { optional: true });
+        this.auth = inject(AuthService, { optional: true });
     }
     /**
-     * Añade un título al artículo
+     * URL base para endpoints de feedback.
      */
-    title(props, options) {
-        this.elements.push({
-            type: 'title',
-            props,
-            ...options,
-        });
-        return this;
+    get baseUrl() {
+        return `${this.config.apiUrl}${this.config.feedbackPrefix}`;
     }
     /**
-     * Añade un subtítulo al artículo
+     * Captura el contexto del dispositivo automáticamente.
      */
-    subtitle(props, options) {
-        this.elements.push({
-            type: 'subtitle',
-            props,
-            ...options,
-        });
-        return this;
+    captureDeviceContext() {
+        const ua = navigator.userAgent;
+        return {
+            browser: this.detectBrowser(ua),
+            os: this.detectOS(ua),
+            viewport: `${window.innerWidth}x${window.innerHeight}`,
+            language: navigator.language,
+            userAgent: ua,
+            pageUrl: window.location.href,
+        };
     }
     /**
-     * Añade un párrafo al artículo
+     * Crea un nuevo feedback.
+     *
+     * @param type - Tipo de feedback
+     * @param title - Título del feedback
+     * @param description - Descripción detallada
+     * @param attachments - URLs de archivos adjuntos (opcional)
+     * @param contentRef - Referencia a contenido específico (opcional)
+     * @returns Observable con la respuesta
      */
-    paragraph(props, options) {
-        this.elements.push({
-            type: 'paragraph',
-            props,
-            ...options,
-        });
-        return this;
+    create(type, title, description, attachments = [], contentRef) {
+        const request = {
+            type,
+            title,
+            description,
+            attachments,
+            contentRef,
+            deviceContext: this.captureDeviceContext(),
+            appId: this.config.appId,
+        };
+        return this.http.post(this.baseUrl, request);
     }
     /**
-     * Añade una cita al artículo
+     * Crea un nuevo feedback (versión async/await).
      */
-    quote(props, options) {
-        this.elements.push({
-            type: 'quote',
-            props,
-            ...options,
-        });
-        return this;
+    async createAsync(type, title, description, attachments = [], contentRef) {
+        return firstValueFrom(this.create(type, title, description, attachments, contentRef));
     }
     /**
-     * Añade código al artículo
+     * Obtiene un feedback por ID (solo el propietario).
+     *
+     * @param feedbackId - ID del feedback
+     * @returns Observable con la respuesta
      */
-    code(code, language, options) {
-        this.elements.push({
-            type: 'code',
-            props: { code, language },
-            ...options,
-        });
-        return this;
+    getById(feedbackId) {
+        return this.http.get(`${this.baseUrl}/${feedbackId}`);
     }
     /**
-     * Añade una lista al artículo
+     * Obtiene un feedback por ID (versión async/await).
      */
-    list(items, listType, options) {
-        this.elements.push({
-            type: 'list',
-            props: { items, listType },
-            ...options,
-        });
-        return this;
+    async getByIdAsync(feedbackId) {
+        return firstValueFrom(this.getById(feedbackId));
     }
     /**
-     * Añade un botón al artículo
+     * Valida si un archivo cumple con las restricciones.
      */
-    button(props, alignment, options) {
-        this.elements.push({
-            type: 'button',
-            props: { ...props, alignment },
-            ...options,
+    validateFile(file) {
+        // Verificar tamaño
+        if (file.size > this.config.maxFileSize) {
+            const maxSizeMB = Math.round(this.config.maxFileSize / (1024 * 1024));
+            return {
+                valid: false,
+                error: `El archivo excede el tamaño máximo de ${maxSizeMB}MB`,
+            };
+        }
+        // Verificar tipo
+        const allowedTypes = this.config.allowedFileTypes || [];
+        const isAllowed = allowedTypes.some(pattern => {
+            if (pattern.endsWith('/*')) {
+                const baseType = pattern.replace('/*', '');
+                return file.type.startsWith(baseType);
+            }
+            return file.type === pattern;
         });
-        return this;
+        if (!isAllowed) {
+            return {
+                valid: false,
+                error: 'Tipo de archivo no permitido',
+            };
+        }
+        return { valid: true };
     }
     /**
-     * Añade un separador al artículo
+     * Valida el CONTENIDO del archivo por magic-bytes (firma binaria) —
+     * defensa contra spoofing del content-type declarado. Lee los primeros 12
+     * bytes y los compara con las firmas de JPEG/PNG/WebP/PDF (whitelist
+     * estricta). Es client-side, ergo bypasseable; la defensa real vive en las
+     * Storage rules. Esto corta el 99% de los casos accidentales o no-targeted.
      */
-    separator(style, options) {
-        this.elements.push({
-            type: 'separator',
-            props: { style },
-            ...options,
-        });
-        return this;
+    async validateFileContent(file) {
+        const buf = await file.slice(0, 12).arrayBuffer();
+        const b = new Uint8Array(buf);
+        // JPEG: FF D8 FF
+        if (b[0] === 0xff && b[1] === 0xd8 && b[2] === 0xff) {
+            return { valid: true };
+        }
+        // PNG: 89 50 4E 47 0D 0A 1A 0A
+        if (b[0] === 0x89 &&
+            b[1] === 0x50 &&
+            b[2] === 0x4e &&
+            b[3] === 0x47 &&
+            b[4] === 0x0d &&
+            b[5] === 0x0a &&
+            b[6] === 0x1a &&
+            b[7] === 0x0a) {
+            return { valid: true };
+        }
+        // WebP: "RIFF" (0..3) + "WEBP" (8..11)
+        if (b[0] === 0x52 &&
+            b[1] === 0x49 &&
+            b[2] === 0x46 &&
+            b[3] === 0x46 &&
+            b[8] === 0x57 &&
+            b[9] === 0x45 &&
+            b[10] === 0x42 &&
+            b[11] === 0x50) {
+            return { valid: true };
+        }
+        // PDF: "%PDF-"
+        if (b[0] === 0x25 && b[1] === 0x50 && b[2] === 0x44 && b[3] === 0x46 && b[4] === 0x2d) {
+            return { valid: true };
+        }
+        return {
+            valid: false,
+            error: 'El contenido del archivo no coincide con un tipo permitido (imagen o PDF).',
+        };
     }
     /**
-     * Añade una imagen al artículo
+     * Sube un adjunto a Firebase Storage en `users/{uid}/feedback/{uuid}/{name}`
+     * y devuelve su download URL. Ejecuta tres validaciones en orden:
+     *   1. tamaño + tipo declarado (`validateFile`)
+     *   2. contenido por magic-bytes (`validateFileContent`)
+     *   3. usuario autenticado (no soportamos adjuntos en feedback anónimo)
+     *
+     * Si cualquier validación falla → rechaza la promesa con un Error legible;
+     * el componente que la consuma debe cancelar la operación de adjuntar.
      */
-    image(src, alt, caption, options) {
-        this.elements.push({
-            type: 'image',
-            props: { src, alt, caption },
-            ...options,
+    async uploadAttachment(file) {
+        const sizeTypeCheck = this.validateFile(file);
+        if (!sizeTypeCheck.valid) {
+            throw new Error(sizeTypeCheck.error);
+        }
+        const contentCheck = await this.validateFileContent(file);
+        if (!contentCheck.valid) {
+            throw new Error(contentCheck.error);
+        }
+        const userId = this.auth?.user()?.userId;
+        if (!userId) {
+            throw new Error('Debes iniciar sesión para adjuntar archivos.');
+        }
+        if (!this.storage) {
+            throw new Error('StorageService no está configurado.');
+        }
+        // Path bajo `users/{uid}/feedback/` — sibling de `files/`, con su propia
+        // regla en `storage.rules` (whitelist estricta JPEG/PNG/WebP/PDF + 5MB).
+        // skipPrefix=true porque `users/{uid}/` es path GLOBAL cross-app.
+        const uuid = typeof crypto !== 'undefined' && 'randomUUID' in crypto
+            ? crypto.randomUUID()
+            : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+        const safeName = file.name.replace(/[^a-zA-Z0-9._-]/g, '_');
+        const path = `users/${userId}/feedback/${uuid}/${safeName}`;
+        const result = await this.storage.uploadAndGetUrl(path, file, {
+            contentType: file.type,
+            skipPrefix: true,
         });
-        return this;
+        return result.downloadUrl;
     }
     /**
-     * Añade una nota destacada al artículo
+     * Obtiene la configuración actual del servicio.
      */
-    note(text, prefix, color, options) {
-        this.elements.push({
-            type: 'note',
-            props: {
-                text,
-                prefix: prefix || 'Nota:',
-                color: color || 'warning',
-                textColor: 'dark',
-                size: 'medium',
-                rounded: true,
-            },
-            ...options,
-        });
-        return this;
+    getConfig() {
+        return this.config;
     }
+    // =========================================================================
+    // Reaction Methods (Content feedback with emojis)
+    // =========================================================================
     /**
-     * Añade un comando de terminal al artículo
-     * Acepta un string simple o un array de comandos
+     * Verifica si el usuario ya dio feedback para una entidad específica.
+     *
+     * Primero intenta leer de Firebase (rápido, sin latencia de red al backend).
+     * Si Firebase no está disponible o falla, hace fallback a la API.
+     *
+     * @param entityType - Tipo de entidad (article, docs, feature, etc.)
+     * @param entityId - ID de la entidad
+     * @returns Promise con la respuesta de verificación
+     *
+     * @example
+     * ```typescript
+     * const check = await this.feedbackService.checkFeedback('article', 'art-123');
+     * if (check.hasFeedback) {
+     *   console.log('Ya dio feedback:', check.reactionValue);
+     * }
+     * ```
      */
-    command(command, options) {
-        const commands = Array.isArray(command) ? command : [command];
-        this.elements.push({
-            type: 'command',
-            props: {
-                lines: commands.map(cmd => ({ text: cmd, type: 'command' })),
-                showCopyButton: true,
-            },
-            ...options,
+    async checkFeedback(entityType, entityId) {
+        // Si no hay usuario autenticado, no puede haber feedback previo
+        // Retornar inmediatamente sin llamar al API (evita 401 y redirect a login)
+        const userId = this.auth?.user()?.userId;
+        if (!userId) {
+            return { operationId: '', hasFeedback: false };
+        }
+        // 1. Intentar Firebase primero (si está disponible)
+        if (this.firestore) {
+            try {
+                // Path: feedback/{entityType}/{entityId}/{userId}
+                // FirestoreService agrega automáticamente el prefijo apps/{appId}/
+                const collectionPath = `feedback/${entityType}/${entityId}`;
+                const doc = await this.firestore.getDoc(collectionPath, userId);
+                if (doc) {
+                    return {
+                        operationId: '',
+                        hasFeedback: true,
+                        feedbackId: doc.feedbackId,
+                        type: doc.type,
+                        reactionValue: doc.reactionValue,
+                        createdAt: doc.createdAt?.toISOString(),
+                    };
+                }
+                // Doc no existe = no hay feedback
+                return { operationId: '', hasFeedback: false };
+            }
+            catch (error) {
+                console.warn('[FeedbackService] Firebase check failed, falling back to API:', error);
+                // Fallback a API
+            }
+        }
+        // 2. Fallback: llamar API (solo si hay usuario autenticado)
+        const params = new URLSearchParams({
+            appId: this.config.appId,
+            entityType,
+            entityId,
         });
-        return this;
+        return firstValueFrom(this.http.get(`${this.baseUrl}/check?${params}`));
     }
     /**
-     * Construye el artículo final
+     * Crea o actualiza una reacción (feedback con emoji).
+     *
+     * @param entityRef - Referencia a la entidad
+     * @param value - Valor de la reacción (negative, neutral, positive)
+     * @param comment - Comentario opcional (máx 500 caracteres)
+     * @returns Promise con la respuesta
+     *
+     * @example
+     * ```typescript
+     * const response = await this.feedbackService.createReaction(
+     *   { entityType: 'article', entityId: 'art-123' },
+     *   'positive',
+     *   'Muy útil!'
+     * );
+     * ```
      */
-    build(config) {
-        return {
-            elements: this.elements,
-            maxWidth: 'auto',
-            centered: true,
-            theme: 'auto',
-            ...config,
+    async createReaction(entityRef, value, comment) {
+        const request = {
+            type: 'reaction',
+            entityRef,
+            reactionValue: value,
+            description: comment || '',
+            deviceContext: this.captureDeviceContext(),
+            appId: this.config.appId,
         };
+        return firstValueFrom(this.http.post(this.baseUrl, request));
     }
     /**
-     * Resetea el builder para crear un nuevo artículo
+     * Crea feedback anónimo (sin autenticación requerida).
+     * Usado para blogs, FAQs y contenido público.
+     *
+     * @param entityRef - Referencia a la entidad
+     * @param value - Valor de la reacción (negative, neutral, positive)
+     * @param comment - Comentario opcional (máx 500 caracteres)
+     * @returns Promise con la respuesta
+     *
+     * @example
+     * ```typescript
+     * // En un blog público
+     * const response = await this.feedbackService.createAnonymousReaction(
+     *   { entityType: 'blog', entityId: 'my-post-slug' },
+     *   'positive'
+     * );
+     * ```
      */
-    clear() {
-        this.elements = [];
-        return this;
+    async createAnonymousReaction(entityRef, value, comment) {
+        const request = {
+            type: 'reaction',
+            entityRef,
+            reactionValue: value,
+            description: comment || '',
+            deviceContext: this.captureDeviceContext(),
+            appId: this.config.appId,
+        };
+        return firstValueFrom(this.http.post(`${this.baseUrl}/anonymous`, request));
+    }
+    // =========================================================================
+    // Helpers privados para detección de browser/OS
+    // =========================================================================
+    detectBrowser(ua) {
+        if (ua.includes('Edg/'))
+            return 'Edge';
+        if (ua.includes('Chrome/'))
+            return 'Chrome';
+        if (ua.includes('Firefox/'))
+            return 'Firefox';
+        if (ua.includes('Safari/') && !ua.includes('Chrome'))
+            return 'Safari';
+        if (ua.includes('Opera') || ua.includes('OPR/'))
+            return 'Opera';
+        return 'Unknown';
+    }
+    detectOS(ua) {
+        if (ua.includes('Windows NT 10'))
+            return 'Windows 10';
+        if (ua.includes('Windows NT 11'))
+            return 'Windows 11';
+        if (ua.includes('Windows'))
+            return 'Windows';
+        if (ua.includes('Mac OS X')) {
+            const match = ua.match(/Mac OS X (\d+[._]\d+)/);
+            if (match) {
+                return `macOS ${match[1].replace('_', '.')}`;
+            }
+            return 'macOS';
+        }
+        if (ua.includes('Android'))
+            return 'Android';
+        if (ua.includes('iPhone') || ua.includes('iPad'))
+            return 'iOS';
+        if (ua.includes('Linux'))
+            return 'Linux';
+        return 'Unknown';
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FeedbackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FeedbackService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FeedbackService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 /**
- * val-article
- *
- * Componente para crear artículos, blogs y documentación de forma declarativa.
- * Permite combinar múltiples elementos (títulos, texto, imágenes, código, etc.)
- * con espaciado automático y soporte multi-idioma.
- *
- * @example Uso básico:
+ * Configuración por defecto de tipos de feedback.
+ */
+const DEFAULT_FEEDBACK_TYPE_OPTIONS = [
+    {
+        value: 'issue',
+        label: 'Reportar problema',
+        description: 'Algo no funciona correctamente',
+        icon: 'bug-outline',
+    },
+    {
+        value: 'poor-content',
+        label: 'Contenido incorrecto',
+        description: 'Información incorrecta o desactualizada',
+        icon: 'document-text-outline',
+    },
+    {
+        value: 'feedback',
+        label: 'Comentario general',
+        description: 'Tu opinión o experiencia',
+        icon: 'chatbubble-outline',
+    },
+    {
+        value: 'suggestion',
+        label: 'Sugerencia',
+        description: 'Propuesta de mejora o nueva funcionalidad',
+        icon: 'bulb-outline',
+    },
+];
+
+/**
+ * Valtech Feedback Service
+ *
+ * Servicio para gestionar feedback de usuarios a nivel de plataforma.
+ *
+ * @example
+ * ```typescript
+ * // main.ts - Configuración
+ * import { provideValtechFeedback } from 'valtech-components';
+ *
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideValtechAuth({ apiUrl: environment.apiUrl }),
+ *     provideValtechFeedback({
+ *       apiUrl: environment.apiUrl,
+ *       appId: 'my-app-name',
+ *     }),
+ *   ],
+ * });
+ *
+ * // component.ts - Uso
+ * import { FeedbackService } from 'valtech-components';
+ *
+ * @Component({...})
+ * export class MyComponent {
+ *   private feedbackService = inject(FeedbackService);
+ *
+ *   async submitFeedback() {
+ *     const response = await this.feedbackService.createAsync(
+ *       'feedback',
+ *       'Título',
+ *       'Descripción...'
+ *     );
+ *   }
+ * }
+ * ```
+ */
+// Configuration
+
+class AttachmentUploaderComponent {
+    get readyUrls() {
+        return this.attachments()
+            .filter(a => a.status === 'ready')
+            .map(a => a.url);
+    }
+    constructor() {
+        this.props = input({});
+        this.attachmentsChange = output();
+        this.i18n = inject(I18nService);
+        this.feedbackService = inject(FeedbackService);
+        this.attachments = signal([]);
+        this.maxFiles = computed(() => this.props().maxFiles ?? 5);
+        this.accept = computed(() => this.props().accept ?? 'image/jpeg,image/png,image/webp,application/pdf');
+        this.maxReached = computed(() => this.attachments().length >= this.maxFiles());
+        this.isDisabled = computed(() => this.props().disabled === true || this.maxReached());
+        this.isUploading = computed(() => this.attachments().some(a => a.status === 'uploading'));
+        addIcons({
+            attachOutline,
+            cameraOutline,
+            checkmarkCircleOutline,
+            closeCircleOutline,
+            documentOutline,
+            imageOutline,
+            trashOutline,
+        });
+    }
+    async onFilesSelected(event) {
+        const input = event.target;
+        const files = Array.from(input.files ?? []);
+        input.value = '';
+        const available = this.maxFiles() - this.attachments().length;
+        const toProcess = files.slice(0, available);
+        for (const file of toProcess) {
+            const id = crypto.randomUUID();
+            this.attachments.update(list => [...list, { id, file, status: 'uploading' }]);
+            this.attachmentsChange.emit(this.attachments());
+            this.uploadFile(id, file);
+        }
+    }
+    async uploadFile(id, file) {
+        try {
+            const url = await this.feedbackService.uploadAttachment(file);
+            this.attachments.update(list => list.map(a => (a.id === id ? { ...a, status: 'ready', url } : a)));
+        }
+        catch {
+            const error = this.i18n.t('attachUploadFailed');
+            this.attachments.update(list => list.map(a => (a.id === id ? { ...a, status: 'error', error } : a)));
+        }
+        this.attachmentsChange.emit(this.attachments());
+    }
+    remove(id) {
+        this.attachments.update(list => list.filter(a => a.id !== id));
+        this.attachmentsChange.emit(this.attachments());
+    }
+    formatSize(bytes) {
+        if (bytes < 1024)
+            return `${bytes} B`;
+        if (bytes < 1024 * 1024)
+            return `${Math.round(bytes / 1024)} KB`;
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AttachmentUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AttachmentUploaderComponent, isStandalone: true, selector: "val-attachment-uploader", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { attachmentsChange: "attachmentsChange" }, ngImport: i0, template: "<div class=\"attachment-uploader\">\n  <input #filePicker type=\"file\" [accept]=\"accept()\" multiple class=\"hidden-input\" (change)=\"onFilesSelected($event)\" />\n  <input\n    #cameraPicker\n    type=\"file\"\n    accept=\"image/*\"\n    capture=\"environment\"\n    class=\"hidden-input\"\n    (change)=\"onFilesSelected($event)\"\n  />\n\n  <div class=\"attachment-actions\">\n    <ion-button fill=\"outline\" size=\"small\" [disabled]=\"isDisabled()\" (click)=\"filePicker.click()\">\n      <ion-icon slot=\"start\" name=\"attach-outline\"></ion-icon>\n      {{ i18n.t('attachAdd') }}\n    </ion-button>\n    <ion-button fill=\"outline\" size=\"small\" [disabled]=\"isDisabled()\" (click)=\"cameraPicker.click()\">\n      <ion-icon slot=\"start\" name=\"camera-outline\"></ion-icon>\n      {{ i18n.t('attachCamera') }}\n    </ion-button>\n  </div>\n\n  @if (maxReached()) {\n  <ion-note color=\"warning\" class=\"max-note\">\n    {{ i18n.t('attachMaxCount', '_global', { count: maxFiles().toString() }) }}\n  </ion-note>\n  } @if (attachments().length > 0) {\n  <div class=\"attachment-list\">\n    @for (item of attachments(); track item.id) {\n    <div class=\"attachment-item\" [class]=\"'status-' + item.status\">\n      <ion-icon\n        class=\"file-icon\"\n        [name]=\"item.file.type.startsWith('image/') ? 'image-outline' : 'document-outline'\"\n      ></ion-icon>\n      <div class=\"file-info\">\n        <span class=\"file-name\">{{ item.file.name }}</span>\n        <span class=\"file-size\">{{ formatSize(item.file.size) }}</span>\n      </div>\n\n      @if (item.status === 'uploading') {\n      <ion-spinner class=\"status-icon\" name=\"circular\"></ion-spinner>\n      } @else if (item.status === 'ready') {\n      <ion-icon class=\"status-icon\" name=\"checkmark-circle-outline\" color=\"success\"></ion-icon>\n      } @else if (item.status === 'error') {\n      <ion-icon class=\"status-icon\" name=\"close-circle-outline\" color=\"danger\"></ion-icon>\n      } @if (item.status !== 'uploading') {\n      <ion-button fill=\"clear\" size=\"small\" color=\"medium\" (click)=\"remove(item.id)\">\n        <ion-icon slot=\"icon-only\" name=\"trash-outline\"></ion-icon>\n      </ion-button>\n      } @if (item.status === 'error' && item.error) {\n      <ion-note color=\"danger\" class=\"error-note\">{{ item.error }}</ion-note>\n      }\n    </div>\n    }\n  </div>\n  }\n</div>\n", styles: [".hidden-input{display:none}.attachment-uploader{display:flex;flex-direction:column;gap:8px}.attachment-actions{display:flex;gap:8px;flex-wrap:wrap}.attachment-list{display:flex;flex-direction:column;gap:4px}.attachment-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;background:var(--ion-color-light);flex-wrap:wrap}.attachment-item.status-error{background:var(--ion-color-danger-tint)}.attachment-item.status-ready{background:var(--ion-color-success-tint)}.file-icon{font-size:20px;flex-shrink:0}.file-info{flex:1;min-width:0;display:flex;flex-direction:column}.file-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{font-size:12px;color:var(--ion-color-medium)}.status-icon{font-size:20px;flex-shrink:0}.error-note{font-size:11px;width:100%}.max-note{font-size:12px}\n"], dependencies: [{ 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"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AttachmentUploaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-attachment-uploader', standalone: true, imports: [IonButton, IonIcon, IonNote, IonSpinner], template: "<div class=\"attachment-uploader\">\n  <input #filePicker type=\"file\" [accept]=\"accept()\" multiple class=\"hidden-input\" (change)=\"onFilesSelected($event)\" />\n  <input\n    #cameraPicker\n    type=\"file\"\n    accept=\"image/*\"\n    capture=\"environment\"\n    class=\"hidden-input\"\n    (change)=\"onFilesSelected($event)\"\n  />\n\n  <div class=\"attachment-actions\">\n    <ion-button fill=\"outline\" size=\"small\" [disabled]=\"isDisabled()\" (click)=\"filePicker.click()\">\n      <ion-icon slot=\"start\" name=\"attach-outline\"></ion-icon>\n      {{ i18n.t('attachAdd') }}\n    </ion-button>\n    <ion-button fill=\"outline\" size=\"small\" [disabled]=\"isDisabled()\" (click)=\"cameraPicker.click()\">\n      <ion-icon slot=\"start\" name=\"camera-outline\"></ion-icon>\n      {{ i18n.t('attachCamera') }}\n    </ion-button>\n  </div>\n\n  @if (maxReached()) {\n  <ion-note color=\"warning\" class=\"max-note\">\n    {{ i18n.t('attachMaxCount', '_global', { count: maxFiles().toString() }) }}\n  </ion-note>\n  } @if (attachments().length > 0) {\n  <div class=\"attachment-list\">\n    @for (item of attachments(); track item.id) {\n    <div class=\"attachment-item\" [class]=\"'status-' + item.status\">\n      <ion-icon\n        class=\"file-icon\"\n        [name]=\"item.file.type.startsWith('image/') ? 'image-outline' : 'document-outline'\"\n      ></ion-icon>\n      <div class=\"file-info\">\n        <span class=\"file-name\">{{ item.file.name }}</span>\n        <span class=\"file-size\">{{ formatSize(item.file.size) }}</span>\n      </div>\n\n      @if (item.status === 'uploading') {\n      <ion-spinner class=\"status-icon\" name=\"circular\"></ion-spinner>\n      } @else if (item.status === 'ready') {\n      <ion-icon class=\"status-icon\" name=\"checkmark-circle-outline\" color=\"success\"></ion-icon>\n      } @else if (item.status === 'error') {\n      <ion-icon class=\"status-icon\" name=\"close-circle-outline\" color=\"danger\"></ion-icon>\n      } @if (item.status !== 'uploading') {\n      <ion-button fill=\"clear\" size=\"small\" color=\"medium\" (click)=\"remove(item.id)\">\n        <ion-icon slot=\"icon-only\" name=\"trash-outline\"></ion-icon>\n      </ion-button>\n      } @if (item.status === 'error' && item.error) {\n      <ion-note color=\"danger\" class=\"error-note\">{{ item.error }}</ion-note>\n      }\n    </div>\n    }\n  </div>\n  }\n</div>\n", styles: [".hidden-input{display:none}.attachment-uploader{display:flex;flex-direction:column;gap:8px}.attachment-actions{display:flex;gap:8px;flex-wrap:wrap}.attachment-list{display:flex;flex-direction:column;gap:4px}.attachment-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;background:var(--ion-color-light);flex-wrap:wrap}.attachment-item.status-error{background:var(--ion-color-danger-tint)}.attachment-item.status-ready{background:var(--ion-color-success-tint)}.file-icon{font-size:20px;flex-shrink:0}.file-info{flex:1;min-width:0;display:flex;flex-direction:column}.file-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{font-size:12px;color:var(--ion-color-medium)}.status-icon{font-size:20px;flex-shrink:0}.error-note{font-size:11px;width:100%}.max-note{font-size:12px}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Configuración de espaciado predefinida
+ */
+const ARTICLE_SPACING = {
+    NONE: { top: 'none', bottom: 'none' },
+    SMALL: { top: 'small', bottom: 'small' },
+    MEDIUM: { top: 'medium', bottom: 'medium' },
+    LARGE: { top: 'large', bottom: 'large' },
+    XLARGE: { top: 'xlarge', bottom: 'xlarge' },
+    // Espaciados específicos para elementos
+    TITLE: { top: 'large', bottom: 'medium' },
+    SUBTITLE: { top: 'medium', bottom: 'small' },
+    PARAGRAPH: { top: 'small', bottom: 'medium' },
+    QUOTE: { top: 'medium', bottom: 'medium' },
+    CODE: { top: 'medium', bottom: 'medium' },
+    NOTE: { top: 'medium', bottom: 'medium' },
+    COMMAND: { top: 'medium', bottom: 'medium' },
+    LIST: { top: 'small', bottom: 'medium' },
+    BUTTON: { top: 'medium', bottom: 'medium' },
+    IMAGE: { top: 'large', bottom: 'large' },
+    SEPARATOR: { top: 'large', bottom: 'large' },
+};
+/**
+ * Función helper para crear elementos de artículo de forma fácil
+ */
+class ArticleBuilder {
+    constructor() {
+        this.elements = [];
+    }
+    /**
+     * Añade un título al artículo
+     */
+    title(props, options) {
+        this.elements.push({
+            type: 'title',
+            props,
+            ...options,
+        });
+        return this;
+    }
+    /**
+     * Añade un subtítulo al artículo
+     */
+    subtitle(props, options) {
+        this.elements.push({
+            type: 'subtitle',
+            props,
+            ...options,
+        });
+        return this;
+    }
+    /**
+     * Añade un párrafo al artículo
+     */
+    paragraph(props, options) {
+        this.elements.push({
+            type: 'paragraph',
+            props,
+            ...options,
+        });
+        return this;
+    }
+    /**
+     * Añade una cita al artículo
+     */
+    quote(props, options) {
+        this.elements.push({
+            type: 'quote',
+            props,
+            ...options,
+        });
+        return this;
+    }
+    /**
+     * Añade código al artículo
+     */
+    code(code, language, options) {
+        this.elements.push({
+            type: 'code',
+            props: { code, language },
+            ...options,
+        });
+        return this;
+    }
+    /**
+     * Añade una lista al artículo
+     */
+    list(items, listType, options) {
+        this.elements.push({
+            type: 'list',
+            props: { items, listType },
+            ...options,
+        });
+        return this;
+    }
+    /**
+     * Añade un botón al artículo
+     */
+    button(props, alignment, options) {
+        this.elements.push({
+            type: 'button',
+            props: { ...props, alignment },
+            ...options,
+        });
+        return this;
+    }
+    /**
+     * Añade un separador al artículo
+     */
+    separator(style, options) {
+        this.elements.push({
+            type: 'separator',
+            props: { style },
+            ...options,
+        });
+        return this;
+    }
+    /**
+     * Añade una imagen al artículo
+     */
+    image(src, alt, caption, options) {
+        this.elements.push({
+            type: 'image',
+            props: { src, alt, caption },
+            ...options,
+        });
+        return this;
+    }
+    /**
+     * Añade una nota destacada al artículo
+     */
+    note(text, prefix, color, options) {
+        this.elements.push({
+            type: 'note',
+            props: {
+                text,
+                prefix: prefix || 'Nota:',
+                color: color || 'warning',
+                textColor: 'dark',
+                size: 'medium',
+                rounded: true,
+            },
+            ...options,
+        });
+        return this;
+    }
+    /**
+     * Añade un comando de terminal al artículo
+     * Acepta un string simple o un array de comandos
+     */
+    command(command, options) {
+        const commands = Array.isArray(command) ? command : [command];
+        this.elements.push({
+            type: 'command',
+            props: {
+                lines: commands.map(cmd => ({ text: cmd, type: 'command' })),
+                showCopyButton: true,
+            },
+            ...options,
+        });
+        return this;
+    }
+    /**
+     * Construye el artículo final
+     */
+    build(config) {
+        return {
+            elements: this.elements,
+            maxWidth: 'auto',
+            centered: true,
+            theme: 'auto',
+            ...config,
+        };
+    }
+    /**
+     * Resetea el builder para crear un nuevo artículo
+     */
+    clear() {
+        this.elements = [];
+        return this;
+    }
+}
+
+/**
+ * val-article
+ *
+ * Componente para crear artículos, blogs y documentación de forma declarativa.
+ * Permite combinar múltiples elementos (títulos, texto, imágenes, código, etc.)
+ * con espaciado automático y soporte multi-idioma.
+ *
+ * @example Uso básico:
  * ```html
  * <val-article [props]="articleConfig"></val-article>
  * ```
@@ -30857,7 +31443,7 @@ class ToolbarComponent {
               [props]="{
                 user: action.user,
                 avatarUrl: action.description,
-                size: 'small',
+                size: action.avatarSize ?? 'small',
               }"
               (onClick)="clickHandler(action.token)"
             ></val-user-avatar>
@@ -30890,7 +31476,7 @@ class ToolbarComponent {
               [props]="{
                 user: action.user,
                 avatarUrl: action.description,
-                size: 'small',
+                size: action.avatarSize ?? 'small',
               }"
               (onClick)="clickHandler(action.token)"
             ></val-user-avatar>
@@ -30947,7 +31533,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               [props]="{
                 user: action.user,
                 avatarUrl: action.description,
-                size: 'small',
+                size: action.avatarSize ?? 'small',
               }"
               (onClick)="clickHandler(action.token)"
             ></val-user-avatar>
@@ -30980,7 +31566,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               [props]="{
                 user: action.user,
                 avatarUrl: action.description,
-                size: 'small',
+                size: action.avatarSize ?? 'small',
               }"
               (onClick)="clickHandler(action.token)"
             ></val-user-avatar>
@@ -31276,6 +31862,12 @@ class MfaModalComponent {
         this._isOpen = false;
         /** Emite cuando el estado MFA cambia (habilitado / deshabilitado). */
         this.changed = new EventEmitter();
+        /**
+         * Emitido cuando un setup MFA se confirma exitosamente y el modal fue abierto
+         * vía deep-link (con `prefillCode`). El host puede usarlo para cerrar el
+         * modal y navegar (ej. a home) en lugar de quedarse en la página de Security.
+         */
+        this.enabledViaDeeplink = new EventEmitter();
         /** Emite cuando el user cierra el modal (botón X o backdrop). */
         this.dismissed = new EventEmitter();
         this.auth = inject(AuthService);
@@ -31304,6 +31896,7 @@ class MfaModalComponent {
         /** Marca momentánea cuando el secreto TOTP se acaba de copiar (feedback visual). */
         this.copiedSecret = signal(false);
         this.resendCooldown = signal(0);
+        this.disableCodeSent = signal(false);
         this.pinControl = new FormControl('', [Validators.required, Validators.minLength(6), Validators.maxLength(6)]);
         this.phoneControl = new FormControl('', [Validators.required, Validators.pattern(/^\+[1-9]\d{6,14}$/)]);
         this.pinInputProps = {
@@ -31419,6 +32012,7 @@ class MfaModalComponent {
     }
     backToStatus() {
         this.stopCooldown();
+        this.disableCodeSent.set(false);
         this.resolveStatus();
     }
     // ===========================================================================
@@ -31506,13 +32100,22 @@ class MfaModalComponent {
             return;
         }
         this.working.set(true);
+        const cameFromDeeplink = !!this.prefillCode;
         this.auth.confirmMFA(code).subscribe({
             next: res => {
                 this.working.set(false);
                 if (res.mfaEnabled) {
                     this.showToast(this.t('mfaEnabledOk'));
                     this.changed.emit();
-                    this.resolveStatus();
+                    if (cameFromDeeplink) {
+                        // El user llegó vía link del email → el host se encarga de cerrar
+                        // el modal y navegar (ej. a home). No resolvemos status acá porque
+                        // implicaría dejar el modal abierto mostrando el estado nuevo.
+                        this.enabledViaDeeplink.emit();
+                    }
+                    else {
+                        this.resolveStatus();
+                    }
                 }
             },
             error: err => {
@@ -31564,6 +32167,20 @@ class MfaModalComponent {
         }
         this.disable({ mfaCode: code });
     }
+    sendDisableCode() {
+        this.working.set(true);
+        this.auth.sendMFADisableCode().subscribe({
+            next: () => {
+                this.working.set(false);
+                this.disableCodeSent.set(true);
+                this.showToast(this.t('mfaDisableCodeSent'));
+            },
+            error: err => {
+                this.working.set(false);
+                this.showToast(this.resolveError(err));
+            },
+        });
+    }
     disable(input) {
         this.working.set(true);
         this.auth.disableMFA(input).subscribe({
@@ -31675,7 +32292,7 @@ class MfaModalComponent {
         this.toast.show({ message, duration: 3500 });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MfaModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MfaModalComponent, isStandalone: true, selector: "val-mfa-modal", inputs: { isOpen: "isOpen", prefillCode: "prefillCode" }, outputs: { changed: "changed", dismissed: "dismissed" }, ngImport: i0, template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"close()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content class=\"ion-padding\">\n      <section class=\"mfa-modal\">\n        <val-display [props]=\"{ content: t('mfaManageTitle'), size: 'small', color: 'dark' }\" />\n\n        @switch (step()) { @case ('loading') {\n        <div class=\"mfa-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @case ('status') { @if (mfaEnabled()) {\n        <p class=\"mfa-status mfa-status--on\">{{ t('mfaEnabledLabel') }} \u00B7 {{ methodLabel(mfaMethod()) }}</p>\n\n        @if (mfaMethod() === 'TOTP') {\n        <div class=\"mfa-block\">\n          <h3>{{ t('mfaBackupCodesTitle') }}</h3>\n          <p class=\"mfa-text\">{{ t('mfaBackupCodesAvailable') }}: {{ backupCodesCount() }}</p>\n\n          @if (regeneratedCodes(); as codes) {\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesSaveWarning') }} {{ t('mfaBackupCodesExplain') }}</p>\n          </div>\n          <div class=\"mfa-codes\">\n            @for (code of codes; track code) {\n            <code class=\"mfa-code\">{{ code }}</code>\n            }\n          </div>\n          <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" (click)=\"copyCodes(codes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n          } @else { @if (backupCodesCount() < 3) {\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesLow') }}</p>\n          </div>\n          }\n          <ion-button\n            expand=\"block\"\n            color=\"dark\"\n            fill=\"outline\"\n            [disabled]=\"working()\"\n            (click)=\"regenerateBackupCodes()\"\n          >\n            @if (working()) {\n            <ion-spinner name=\"crescent\"></ion-spinner>\n            } @else { {{ t('mfaRegenerateCodes') }} }\n          </ion-button>\n          }\n        </div>\n        }\n\n        <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" (click)=\"goToDisable()\">\n          {{ t('mfaDisableButton') }}\n        </ion-button>\n        } @else {\n        <p class=\"mfa-status mfa-status--off\">{{ t('mfaDisabledLabel') }}</p>\n        <p class=\"mfa-text\">{{ t('mfaDisabledHint') }}</p>\n        <ion-button expand=\"block\" (click)=\"goToMethodSelect()\"> {{ t('mfaEnableButton') }} </ion-button>\n        } } @case ('method-select') {\n        <val-title [props]=\"{ content: t('mfaEnableTitle'), size: 'large', color: '', bold: false }\" />\n        <p class=\"mfa-text\">{{ t('mfaMethodPrompt') }}</p>\n\n        <ion-radio-group [value]=\"selectedMethod()\" (ionChange)=\"selectedMethod.set($event.detail.value)\">\n          <ion-item>\n            <ion-radio slot=\"start\" value=\"TOTP\"></ion-radio>\n            <ion-label>\n              <strong>{{ t('mfaMethodTotp') }}</strong>\n              <p>{{ t('mfaMethodTotpHint') }}</p>\n            </ion-label>\n          </ion-item>\n          <ion-item>\n            <ion-radio slot=\"start\" value=\"EMAIL\"></ion-radio>\n            <ion-label>\n              <strong>{{ t('mfaMethodEmail') }}</strong>\n              <p>{{ t('mfaMethodEmailHint') }}</p>\n            </ion-label>\n          </ion-item>\n          <ion-item>\n            <ion-radio slot=\"start\" value=\"SMS\"></ion-radio>\n            <ion-label>\n              <strong>{{ t('mfaMethodSms') }}</strong>\n              <p>{{ t('mfaMethodSmsHint') }}</p>\n            </ion-label>\n          </ion-item>\n        </ion-radio-group>\n\n        @if (selectedMethod() === 'SMS' && !userPhone()) {\n        <ion-input\n          label=\"{{ t('mfaPhoneLabel') }}\"\n          labelPlacement=\"floating\"\n          fill=\"outline\"\n          type=\"tel\"\n          placeholder=\"+56912345678\"\n          [formControl]=\"phoneControl\"\n        ></ion-input>\n        @if (phoneControl.invalid && phoneControl.touched) {\n        <p class=\"mfa-error\">{{ t('mfaPhoneInvalid') }}</p>\n        } } @if (selectedMethod() === 'SMS' && userPhone(); as phone) {\n        <p class=\"mfa-text\">{{ t('mfaPhoneRegistered') }}: {{ phone }}</p>\n        }\n\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"proceedWithMethod()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaContinue') }} }\n        </ion-button>\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('totp-setup') {\n        <val-title [props]=\"{ content: t('mfaTotpSetupTitle'), size: 'large', color: '', bold: false }\" />\n        <p class=\"mfa-text\">{{ t('mfaTotpStep1') }}</p>\n\n        @if (totpQr(); as qr) {\n        <div class=\"mfa-qr\">\n          <val-qr-code [props]=\"{ qr: qr }\" />\n        </div>\n        } @if (totpSetup(); as setup) {\n        <p class=\"mfa-text\">{{ t('mfaTotpManualEntry') }}</p>\n        <div class=\"mfa-secret-row\">\n          <code class=\"mfa-secret\">{{ setup.secret }}</code>\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"copySecret(setup.secret)\" [attr.aria-label]=\"t('copy')\">\n            @if (copiedSecret()) {\n            <ion-icon name=\"checkmark-outline\"></ion-icon>\n            } @else {\n            <ion-icon name=\"copy-outline\"></ion-icon>\n            }\n          </ion-button>\n        </div>\n\n        <p class=\"mfa-text\">{{ t('mfaTotpStep2') }}</p>\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"verifyTotp()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaTotpVerify') }} }\n        </ion-button>\n\n        <div class=\"mfa-backup\">\n          <h3>{{ t('mfaBackupCodesTitle') }}</h3>\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesSaveWarning') }} {{ t('mfaBackupCodesExplain') }}</p>\n          </div>\n          <div class=\"mfa-codes\">\n            @for (code of setup.backupCodes; track code) {\n            <code class=\"mfa-code\">{{ code }}</code>\n            }\n          </div>\n          <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" (click)=\"copyCodes(setup.backupCodes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n        </div>\n        }\n\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('code-confirm') {\n        <val-title [props]=\"{ content: t('mfaConfirmTitle'), size: 'large', color: '', bold: false }\" />\n        <p class=\"mfa-text\">\n          {{ selectedMethod() === 'EMAIL' ? t('mfaConfirmPromptEmail') : t('mfaConfirmPromptSms') }}\n        </p>\n\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"confirmCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaConfirmButton') }} }\n        </ion-button>\n\n        <p class=\"mfa-resend\">\n          {{ t('mfaNoCode') }} @if (resendCooldown() > 0) {\n          <span class=\"mfa-text\">{{ t('mfaResendIn') }} {{ resendCooldown() }}s</span>\n          } @else {\n          <a (click)=\"resendCode()\">{{ t('mfaResend') }}</a>\n          }\n        </p>\n\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('disable') { @if (hasPassword()) {\n        <val-form [props]=\"disableFormProps()\" (onSubmit)=\"onDisableSubmit($event)\" />\n        } @else if (mfaMethod() === 'TOTP') {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <p class=\"mfa-text\">{{ t('mfaDisableTotpPrompt') }}</p>\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        } @else {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <p class=\"mfa-text\">{{ t('mfaDisableNeedsPassword') }}</p>\n        }\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".mfa-modal{display:flex;flex-direction:column;gap:14px;padding-top:4px}.mfa-loading{display:flex;justify-content:center;padding:40px 0}.mfa-status{display:inline-flex;align-items:center;width:fit-content;padding:4px 10px;border-radius:999px;font-size:13px;font-weight:600;margin:0}.mfa-status--on{color:var(--ion-color-success-shade);background:rgba(var(--ion-color-success-rgb),.12)}.mfa-status--off{color:var(--ion-color-medium-shade);background:var(--ion-color-light)}.mfa-secret-row{display:flex;align-items:center;gap:8px}.mfa-secret-row .mfa-secret{flex:1;margin:0}.mfa-secret-row ion-button{flex-shrink:0;--color: var(--ion-color-dark);margin:0}.mfa-text{color:var(--ion-color-dark);font-size:14px;margin:0}.mfa-error{color:var(--ion-color-danger);font-size:13px;margin:4px 0 0}.mfa-block,.mfa-backup{display:flex;flex-direction:column;gap:12px}.mfa-block{padding:16px;border-radius:14px;background:var(--ion-color-light)}.mfa-block h3,.mfa-backup h3{font-size:15px;font-weight:600;margin:0;color:var(--ion-color-dark)}.mfa-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;background:var(--ion-color-light);border-left:3px solid var(--ion-color-primary)}.mfa-alert ion-icon{font-size:20px;color:var(--ion-color-primary);flex-shrink:0;margin-top:1px}.mfa-alert p{margin:0;font-size:13px;line-height:1.45;color:var(--ion-color-dark)}.mfa-qr{display:flex;justify-content:center;padding:8px 0}.mfa-secret{display:block;padding:10px 12px;border-radius:8px;background:var(--ion-color-light);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;letter-spacing:.04em;word-break:break-all;text-align:center}.mfa-pin{display:flex;justify-content:center;padding:8px 0}.mfa-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px;border-radius:12px;background:var(--ion-color-light)}.mfa-code{padding:8px;border-radius:6px;background:var(--ion-background-color, #fff);color:var(--ion-color-dark);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;text-align:center}.mfa-resend{text-align:center;font-size:14px;color:var(--ion-color-dark);margin:4px 0}.mfa-resend a{color:var(--ion-color-primary);cursor:pointer;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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: 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: IonModal, selector: "ion-modal" }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }, { kind: "component", type: QrCodeComponent, selector: "val-qr-code", inputs: ["props"], outputs: ["actionComplete", "imageLoad", "imageError"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: PinInputComponent, selector: "val-pin-input", inputs: ["props"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MfaModalComponent, isStandalone: true, selector: "val-mfa-modal", inputs: { isOpen: "isOpen", prefillCode: "prefillCode" }, outputs: { changed: "changed", enabledViaDeeplink: "enabledViaDeeplink", dismissed: "dismissed" }, ngImport: i0, template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"close()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content class=\"ion-padding\">\n      <section class=\"mfa-modal\">\n        <val-display [props]=\"{ content: t('mfaManageTitle'), size: 'small', color: 'dark' }\" />\n\n        @switch (step()) { @case ('loading') {\n        <div class=\"mfa-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @case ('status') { @if (mfaEnabled()) {\n        <p class=\"mfa-status mfa-status--on\">{{ t('mfaEnabledLabel') }} \u00B7 {{ methodLabel(mfaMethod()) }}</p>\n\n        @if (mfaMethod() === 'TOTP') {\n        <div class=\"mfa-block\">\n          <val-title [props]=\"{ size: 'small', color: 'dark', bold: true, content: t('mfaBackupCodesTitle') }\" />\n          <val-text\n            [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaBackupCodesAvailable') + ': ' + backupCodesCount() }\"\n          />\n\n          @if (regeneratedCodes(); as codes) {\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesSaveWarning') }} {{ t('mfaBackupCodesExplain') }}</p>\n          </div>\n          <div class=\"mfa-codes\">\n            @for (code of codes; track code) {\n            <code class=\"mfa-code\">{{ code }}</code>\n            }\n          </div>\n          <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" (click)=\"copyCodes(codes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n          } @else { @if (backupCodesCount() < 3) {\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesLow') }}</p>\n          </div>\n          }\n          <ion-button\n            expand=\"block\"\n            color=\"dark\"\n            fill=\"outline\"\n            [disabled]=\"working()\"\n            (click)=\"regenerateBackupCodes()\"\n          >\n            @if (working()) {\n            <ion-spinner name=\"crescent\"></ion-spinner>\n            } @else { {{ t('mfaRegenerateCodes') }} }\n          </ion-button>\n          }\n        </div>\n        }\n\n        <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" (click)=\"goToDisable()\">\n          {{ t('mfaDisableButton') }}\n        </ion-button>\n        } @else {\n        <p class=\"mfa-status mfa-status--off\">{{ t('mfaDisabledLabel') }}</p>\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisabledHint') }\" />\n        <ion-button expand=\"block\" (click)=\"goToMethodSelect()\"> {{ t('mfaEnableButton') }} </ion-button>\n        } } @case ('method-select') {\n        <val-title [props]=\"{ content: t('mfaEnableTitle'), size: 'large', color: 'dark', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaMethodPrompt') }\" />\n\n        <div class=\"mfa-method-list\" role=\"radiogroup\">\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'TOTP'\"\n            (click)=\"selectedMethod.set('TOTP')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'TOTP'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodTotp') }}</strong>\n              <span>{{ t('mfaMethodTotpHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'EMAIL'\"\n            (click)=\"selectedMethod.set('EMAIL')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'EMAIL'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodEmail') }}</strong>\n              <span>{{ t('mfaMethodEmailHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'SMS'\"\n            (click)=\"selectedMethod.set('SMS')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'SMS'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodSms') }}</strong>\n              <span>{{ t('mfaMethodSmsHint') }}</span>\n            </span>\n          </button>\n        </div>\n\n        @if (selectedMethod() === 'SMS' && !userPhone()) {\n        <ion-input\n          label=\"{{ t('mfaPhoneLabel') }}\"\n          labelPlacement=\"floating\"\n          fill=\"outline\"\n          type=\"tel\"\n          placeholder=\"+56912345678\"\n          [formControl]=\"phoneControl\"\n        ></ion-input>\n        @if (phoneControl.invalid && phoneControl.touched) {\n        <p class=\"mfa-error\">{{ t('mfaPhoneInvalid') }}</p>\n        } } @if (selectedMethod() === 'SMS' && userPhone(); as phone) {\n        <val-text\n          [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaPhoneRegistered') + ': ' + phone }\"\n        />\n        }\n\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"proceedWithMethod()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaContinue') }} }\n        </ion-button>\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('totp-setup') {\n        <val-title [props]=\"{ content: t('mfaTotpSetupTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpStep1') }\" />\n\n        @if (totpQr(); as qr) {\n        <div class=\"mfa-qr\">\n          <val-qr-code [props]=\"{ qr: qr }\" />\n        </div>\n        } @if (totpSetup(); as setup) {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpManualEntry') }\" />\n        <div class=\"mfa-secret-row\">\n          <code class=\"mfa-secret\">{{ setup.secret }}</code>\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"copySecret(setup.secret)\" [attr.aria-label]=\"t('copy')\">\n            @if (copiedSecret()) {\n            <ion-icon name=\"checkmark-outline\"></ion-icon>\n            } @else {\n            <ion-icon name=\"copy-outline\"></ion-icon>\n            }\n          </ion-button>\n        </div>\n\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpStep2') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"verifyTotp()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaTotpVerify') }} }\n        </ion-button>\n\n        <div class=\"mfa-backup\">\n          <val-title [props]=\"{ size: 'small', color: 'dark', bold: true, content: t('mfaBackupCodesTitle') }\" />\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesSaveWarning') }} {{ t('mfaBackupCodesExplain') }}</p>\n          </div>\n          <div class=\"mfa-codes\">\n            @for (code of setup.backupCodes; track code) {\n            <code class=\"mfa-code\">{{ code }}</code>\n            }\n          </div>\n          <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" (click)=\"copyCodes(setup.backupCodes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n        </div>\n        }\n\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('code-confirm') {\n        <val-title [props]=\"{ content: t('mfaConfirmTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text\n          [props]=\"{ size: 'medium', color: 'dark', bold: false, content: selectedMethod() === 'EMAIL' ? t('mfaConfirmPromptEmail') : t('mfaConfirmPromptSms') }\"\n        />\n\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"confirmCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaConfirmButton') }} }\n        </ion-button>\n\n        <p class=\"mfa-resend\">\n          {{ t('mfaNoCode') }} @if (resendCooldown() > 0) {\n          <span>{{ t('mfaResendIn') }} {{ resendCooldown() }}s</span>\n          } @else {\n          <a (click)=\"resendCode()\">{{ t('mfaResend') }}</a>\n          }\n        </p>\n\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('disable') { @if (hasPassword()) {\n        <val-form [props]=\"disableFormProps()\" (onSubmit)=\"onDisableSubmit($event)\" />\n        } @else if (mfaMethod() === 'TOTP') {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableTotpPrompt') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        } @else if (mfaMethod() === 'EMAIL' || mfaMethod() === 'SMS') {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        @if (!disableCodeSent()) {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableCodePrompt') }\" />\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"sendDisableCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableSendCode') }} }\n        </ion-button>\n        } @else {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableCodePrompt') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        <ion-button expand=\"block\" fill=\"clear\" color=\"medium\" [disabled]=\"working()\" (click)=\"sendDisableCode()\">\n          {{ t('mfaDisableResendCode') }}\n        </ion-button>\n        } } @else {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableNeedsPassword') }\" />\n        }\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".mfa-modal{display:flex;flex-direction:column;gap:14px;padding-top:4px}.mfa-loading{display:flex;justify-content:center;padding:40px 0}.mfa-status{display:inline-flex;align-items:center;width:fit-content;padding:4px 10px;border-radius:999px;font-size:13px;font-weight:600;margin:0}.mfa-status--on{color:var(--ion-color-success-shade);background:rgba(var(--ion-color-success-rgb),.12)}.mfa-status--off{color:var(--ion-color-medium-shade);background:var(--ion-color-light)}.mfa-secret-row{display:flex;align-items:center;gap:8px}.mfa-secret-row .mfa-secret{flex:1;margin:0}.mfa-secret-row ion-button{flex-shrink:0;--color: var(--ion-color-dark);margin:0}.mfa-error{color:var(--ion-color-danger);font-size:13px;margin:4px 0 0}.mfa-block,.mfa-backup{display:flex;flex-direction:column;gap:12px}.mfa-block{padding:16px;border-radius:14px;background:var(--ion-color-light)}.mfa-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;background:var(--ion-color-light);border-left:3px solid var(--ion-color-primary)}.mfa-alert ion-icon{font-size:20px;color:var(--ion-color-primary);flex-shrink:0;margin-top:1px}.mfa-alert p{margin:0;font-size:13px;line-height:1.45;color:var(--ion-color-dark)}.mfa-qr{display:flex;justify-content:center;padding:8px 0}.mfa-secret{display:block;padding:10px 12px;border-radius:8px;background:var(--ion-color-light);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;letter-spacing:.04em;word-break:break-all;text-align:center}.mfa-pin{display:flex;justify-content:center;padding:8px 0}.mfa-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px;border-radius:12px;background:var(--ion-color-light)}.mfa-code{padding:8px;border-radius:6px;background:var(--ion-background-color, #fff);color:var(--ion-color-dark);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;text-align:center}.mfa-method-list{display:flex;flex-direction:column;gap:8px}.mfa-method-card{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;border:1.5px solid var(--ion-border-color, rgba(var(--ion-color-dark-rgb), .14));background:transparent;cursor:pointer;text-align:left;width:100%;transition:border-color .15s ease,background .15s ease}.mfa-method-card--active{border-color:var(--ion-color-primary);background:rgba(var(--ion-color-primary-rgb),.07)}.mfa-method-card__dot{flex-shrink:0;width:18px;height:18px;border-radius:50%;border:2px solid var(--ion-color-medium);margin-top:2px;transition:border-color .15s,box-shadow .15s}.mfa-method-card--active .mfa-method-card__dot{border-color:var(--ion-color-primary);box-shadow:inset 0 0 0 4px var(--ion-color-primary)}.mfa-method-card__body{display:flex;flex-direction:column;gap:3px}.mfa-method-card__body strong{font-size:15px;font-weight:600;color:var(--ion-color-dark)}.mfa-method-card__body span{font-size:13px;color:var(--ion-color-medium);line-height:1.4}.mfa-resend{text-align:center;font-size:14px;color:var(--ion-color-dark);margin:4px 0}.mfa-resend a{color:var(--ion-color-primary);cursor:pointer;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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: IonModal, selector: "ion-modal" }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }, { kind: "component", type: QrCodeComponent, selector: "val-qr-code", inputs: ["props"], outputs: ["actionComplete", "imageLoad", "imageError"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: PinInputComponent, selector: "val-pin-input", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MfaModalComponent, decorators: [{
             type: Component,
@@ -31697,15 +32314,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         DisplayComponent,
                         FormComponent,
                         QrCodeComponent,
+                        TextComponent,
                         TitleComponent,
                         PinInputComponent,
-                    ], template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"close()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content class=\"ion-padding\">\n      <section class=\"mfa-modal\">\n        <val-display [props]=\"{ content: t('mfaManageTitle'), size: 'small', color: 'dark' }\" />\n\n        @switch (step()) { @case ('loading') {\n        <div class=\"mfa-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @case ('status') { @if (mfaEnabled()) {\n        <p class=\"mfa-status mfa-status--on\">{{ t('mfaEnabledLabel') }} \u00B7 {{ methodLabel(mfaMethod()) }}</p>\n\n        @if (mfaMethod() === 'TOTP') {\n        <div class=\"mfa-block\">\n          <h3>{{ t('mfaBackupCodesTitle') }}</h3>\n          <p class=\"mfa-text\">{{ t('mfaBackupCodesAvailable') }}: {{ backupCodesCount() }}</p>\n\n          @if (regeneratedCodes(); as codes) {\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesSaveWarning') }} {{ t('mfaBackupCodesExplain') }}</p>\n          </div>\n          <div class=\"mfa-codes\">\n            @for (code of codes; track code) {\n            <code class=\"mfa-code\">{{ code }}</code>\n            }\n          </div>\n          <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" (click)=\"copyCodes(codes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n          } @else { @if (backupCodesCount() < 3) {\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesLow') }}</p>\n          </div>\n          }\n          <ion-button\n            expand=\"block\"\n            color=\"dark\"\n            fill=\"outline\"\n            [disabled]=\"working()\"\n            (click)=\"regenerateBackupCodes()\"\n          >\n            @if (working()) {\n            <ion-spinner name=\"crescent\"></ion-spinner>\n            } @else { {{ t('mfaRegenerateCodes') }} }\n          </ion-button>\n          }\n        </div>\n        }\n\n        <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" (click)=\"goToDisable()\">\n          {{ t('mfaDisableButton') }}\n        </ion-button>\n        } @else {\n        <p class=\"mfa-status mfa-status--off\">{{ t('mfaDisabledLabel') }}</p>\n        <p class=\"mfa-text\">{{ t('mfaDisabledHint') }}</p>\n        <ion-button expand=\"block\" (click)=\"goToMethodSelect()\"> {{ t('mfaEnableButton') }} </ion-button>\n        } } @case ('method-select') {\n        <val-title [props]=\"{ content: t('mfaEnableTitle'), size: 'large', color: '', bold: false }\" />\n        <p class=\"mfa-text\">{{ t('mfaMethodPrompt') }}</p>\n\n        <ion-radio-group [value]=\"selectedMethod()\" (ionChange)=\"selectedMethod.set($event.detail.value)\">\n          <ion-item>\n            <ion-radio slot=\"start\" value=\"TOTP\"></ion-radio>\n            <ion-label>\n              <strong>{{ t('mfaMethodTotp') }}</strong>\n              <p>{{ t('mfaMethodTotpHint') }}</p>\n            </ion-label>\n          </ion-item>\n          <ion-item>\n            <ion-radio slot=\"start\" value=\"EMAIL\"></ion-radio>\n            <ion-label>\n              <strong>{{ t('mfaMethodEmail') }}</strong>\n              <p>{{ t('mfaMethodEmailHint') }}</p>\n            </ion-label>\n          </ion-item>\n          <ion-item>\n            <ion-radio slot=\"start\" value=\"SMS\"></ion-radio>\n            <ion-label>\n              <strong>{{ t('mfaMethodSms') }}</strong>\n              <p>{{ t('mfaMethodSmsHint') }}</p>\n            </ion-label>\n          </ion-item>\n        </ion-radio-group>\n\n        @if (selectedMethod() === 'SMS' && !userPhone()) {\n        <ion-input\n          label=\"{{ t('mfaPhoneLabel') }}\"\n          labelPlacement=\"floating\"\n          fill=\"outline\"\n          type=\"tel\"\n          placeholder=\"+56912345678\"\n          [formControl]=\"phoneControl\"\n        ></ion-input>\n        @if (phoneControl.invalid && phoneControl.touched) {\n        <p class=\"mfa-error\">{{ t('mfaPhoneInvalid') }}</p>\n        } } @if (selectedMethod() === 'SMS' && userPhone(); as phone) {\n        <p class=\"mfa-text\">{{ t('mfaPhoneRegistered') }}: {{ phone }}</p>\n        }\n\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"proceedWithMethod()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaContinue') }} }\n        </ion-button>\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('totp-setup') {\n        <val-title [props]=\"{ content: t('mfaTotpSetupTitle'), size: 'large', color: '', bold: false }\" />\n        <p class=\"mfa-text\">{{ t('mfaTotpStep1') }}</p>\n\n        @if (totpQr(); as qr) {\n        <div class=\"mfa-qr\">\n          <val-qr-code [props]=\"{ qr: qr }\" />\n        </div>\n        } @if (totpSetup(); as setup) {\n        <p class=\"mfa-text\">{{ t('mfaTotpManualEntry') }}</p>\n        <div class=\"mfa-secret-row\">\n          <code class=\"mfa-secret\">{{ setup.secret }}</code>\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"copySecret(setup.secret)\" [attr.aria-label]=\"t('copy')\">\n            @if (copiedSecret()) {\n            <ion-icon name=\"checkmark-outline\"></ion-icon>\n            } @else {\n            <ion-icon name=\"copy-outline\"></ion-icon>\n            }\n          </ion-button>\n        </div>\n\n        <p class=\"mfa-text\">{{ t('mfaTotpStep2') }}</p>\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"verifyTotp()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaTotpVerify') }} }\n        </ion-button>\n\n        <div class=\"mfa-backup\">\n          <h3>{{ t('mfaBackupCodesTitle') }}</h3>\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesSaveWarning') }} {{ t('mfaBackupCodesExplain') }}</p>\n          </div>\n          <div class=\"mfa-codes\">\n            @for (code of setup.backupCodes; track code) {\n            <code class=\"mfa-code\">{{ code }}</code>\n            }\n          </div>\n          <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" (click)=\"copyCodes(setup.backupCodes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n        </div>\n        }\n\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('code-confirm') {\n        <val-title [props]=\"{ content: t('mfaConfirmTitle'), size: 'large', color: '', bold: false }\" />\n        <p class=\"mfa-text\">\n          {{ selectedMethod() === 'EMAIL' ? t('mfaConfirmPromptEmail') : t('mfaConfirmPromptSms') }}\n        </p>\n\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"confirmCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaConfirmButton') }} }\n        </ion-button>\n\n        <p class=\"mfa-resend\">\n          {{ t('mfaNoCode') }} @if (resendCooldown() > 0) {\n          <span class=\"mfa-text\">{{ t('mfaResendIn') }} {{ resendCooldown() }}s</span>\n          } @else {\n          <a (click)=\"resendCode()\">{{ t('mfaResend') }}</a>\n          }\n        </p>\n\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('disable') { @if (hasPassword()) {\n        <val-form [props]=\"disableFormProps()\" (onSubmit)=\"onDisableSubmit($event)\" />\n        } @else if (mfaMethod() === 'TOTP') {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <p class=\"mfa-text\">{{ t('mfaDisableTotpPrompt') }}</p>\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        } @else {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <p class=\"mfa-text\">{{ t('mfaDisableNeedsPassword') }}</p>\n        }\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".mfa-modal{display:flex;flex-direction:column;gap:14px;padding-top:4px}.mfa-loading{display:flex;justify-content:center;padding:40px 0}.mfa-status{display:inline-flex;align-items:center;width:fit-content;padding:4px 10px;border-radius:999px;font-size:13px;font-weight:600;margin:0}.mfa-status--on{color:var(--ion-color-success-shade);background:rgba(var(--ion-color-success-rgb),.12)}.mfa-status--off{color:var(--ion-color-medium-shade);background:var(--ion-color-light)}.mfa-secret-row{display:flex;align-items:center;gap:8px}.mfa-secret-row .mfa-secret{flex:1;margin:0}.mfa-secret-row ion-button{flex-shrink:0;--color: var(--ion-color-dark);margin:0}.mfa-text{color:var(--ion-color-dark);font-size:14px;margin:0}.mfa-error{color:var(--ion-color-danger);font-size:13px;margin:4px 0 0}.mfa-block,.mfa-backup{display:flex;flex-direction:column;gap:12px}.mfa-block{padding:16px;border-radius:14px;background:var(--ion-color-light)}.mfa-block h3,.mfa-backup h3{font-size:15px;font-weight:600;margin:0;color:var(--ion-color-dark)}.mfa-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;background:var(--ion-color-light);border-left:3px solid var(--ion-color-primary)}.mfa-alert ion-icon{font-size:20px;color:var(--ion-color-primary);flex-shrink:0;margin-top:1px}.mfa-alert p{margin:0;font-size:13px;line-height:1.45;color:var(--ion-color-dark)}.mfa-qr{display:flex;justify-content:center;padding:8px 0}.mfa-secret{display:block;padding:10px 12px;border-radius:8px;background:var(--ion-color-light);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;letter-spacing:.04em;word-break:break-all;text-align:center}.mfa-pin{display:flex;justify-content:center;padding:8px 0}.mfa-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px;border-radius:12px;background:var(--ion-color-light)}.mfa-code{padding:8px;border-radius:6px;background:var(--ion-background-color, #fff);color:var(--ion-color-dark);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;text-align:center}.mfa-resend{text-align:center;font-size:14px;color:var(--ion-color-dark);margin:4px 0}.mfa-resend a{color:var(--ion-color-primary);cursor:pointer;font-weight:600}\n"] }]
+                    ], template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"close()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content class=\"ion-padding\">\n      <section class=\"mfa-modal\">\n        <val-display [props]=\"{ content: t('mfaManageTitle'), size: 'small', color: 'dark' }\" />\n\n        @switch (step()) { @case ('loading') {\n        <div class=\"mfa-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @case ('status') { @if (mfaEnabled()) {\n        <p class=\"mfa-status mfa-status--on\">{{ t('mfaEnabledLabel') }} \u00B7 {{ methodLabel(mfaMethod()) }}</p>\n\n        @if (mfaMethod() === 'TOTP') {\n        <div class=\"mfa-block\">\n          <val-title [props]=\"{ size: 'small', color: 'dark', bold: true, content: t('mfaBackupCodesTitle') }\" />\n          <val-text\n            [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaBackupCodesAvailable') + ': ' + backupCodesCount() }\"\n          />\n\n          @if (regeneratedCodes(); as codes) {\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesSaveWarning') }} {{ t('mfaBackupCodesExplain') }}</p>\n          </div>\n          <div class=\"mfa-codes\">\n            @for (code of codes; track code) {\n            <code class=\"mfa-code\">{{ code }}</code>\n            }\n          </div>\n          <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" (click)=\"copyCodes(codes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n          } @else { @if (backupCodesCount() < 3) {\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesLow') }}</p>\n          </div>\n          }\n          <ion-button\n            expand=\"block\"\n            color=\"dark\"\n            fill=\"outline\"\n            [disabled]=\"working()\"\n            (click)=\"regenerateBackupCodes()\"\n          >\n            @if (working()) {\n            <ion-spinner name=\"crescent\"></ion-spinner>\n            } @else { {{ t('mfaRegenerateCodes') }} }\n          </ion-button>\n          }\n        </div>\n        }\n\n        <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" (click)=\"goToDisable()\">\n          {{ t('mfaDisableButton') }}\n        </ion-button>\n        } @else {\n        <p class=\"mfa-status mfa-status--off\">{{ t('mfaDisabledLabel') }}</p>\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisabledHint') }\" />\n        <ion-button expand=\"block\" (click)=\"goToMethodSelect()\"> {{ t('mfaEnableButton') }} </ion-button>\n        } } @case ('method-select') {\n        <val-title [props]=\"{ content: t('mfaEnableTitle'), size: 'large', color: 'dark', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaMethodPrompt') }\" />\n\n        <div class=\"mfa-method-list\" role=\"radiogroup\">\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'TOTP'\"\n            (click)=\"selectedMethod.set('TOTP')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'TOTP'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodTotp') }}</strong>\n              <span>{{ t('mfaMethodTotpHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'EMAIL'\"\n            (click)=\"selectedMethod.set('EMAIL')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'EMAIL'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodEmail') }}</strong>\n              <span>{{ t('mfaMethodEmailHint') }}</span>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mfa-method-card\"\n            [class.mfa-method-card--active]=\"selectedMethod() === 'SMS'\"\n            (click)=\"selectedMethod.set('SMS')\"\n            role=\"radio\"\n            [attr.aria-checked]=\"selectedMethod() === 'SMS'\"\n          >\n            <span class=\"mfa-method-card__dot\"></span>\n            <span class=\"mfa-method-card__body\">\n              <strong>{{ t('mfaMethodSms') }}</strong>\n              <span>{{ t('mfaMethodSmsHint') }}</span>\n            </span>\n          </button>\n        </div>\n\n        @if (selectedMethod() === 'SMS' && !userPhone()) {\n        <ion-input\n          label=\"{{ t('mfaPhoneLabel') }}\"\n          labelPlacement=\"floating\"\n          fill=\"outline\"\n          type=\"tel\"\n          placeholder=\"+56912345678\"\n          [formControl]=\"phoneControl\"\n        ></ion-input>\n        @if (phoneControl.invalid && phoneControl.touched) {\n        <p class=\"mfa-error\">{{ t('mfaPhoneInvalid') }}</p>\n        } } @if (selectedMethod() === 'SMS' && userPhone(); as phone) {\n        <val-text\n          [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaPhoneRegistered') + ': ' + phone }\"\n        />\n        }\n\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"proceedWithMethod()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaContinue') }} }\n        </ion-button>\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('totp-setup') {\n        <val-title [props]=\"{ content: t('mfaTotpSetupTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpStep1') }\" />\n\n        @if (totpQr(); as qr) {\n        <div class=\"mfa-qr\">\n          <val-qr-code [props]=\"{ qr: qr }\" />\n        </div>\n        } @if (totpSetup(); as setup) {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpManualEntry') }\" />\n        <div class=\"mfa-secret-row\">\n          <code class=\"mfa-secret\">{{ setup.secret }}</code>\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"copySecret(setup.secret)\" [attr.aria-label]=\"t('copy')\">\n            @if (copiedSecret()) {\n            <ion-icon name=\"checkmark-outline\"></ion-icon>\n            } @else {\n            <ion-icon name=\"copy-outline\"></ion-icon>\n            }\n          </ion-button>\n        </div>\n\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaTotpStep2') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"verifyTotp()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaTotpVerify') }} }\n        </ion-button>\n\n        <div class=\"mfa-backup\">\n          <val-title [props]=\"{ size: 'small', color: 'dark', bold: true, content: t('mfaBackupCodesTitle') }\" />\n          <div class=\"mfa-alert\">\n            <ion-icon name=\"information-circle-outline\"></ion-icon>\n            <p>{{ t('mfaBackupCodesSaveWarning') }} {{ t('mfaBackupCodesExplain') }}</p>\n          </div>\n          <div class=\"mfa-codes\">\n            @for (code of setup.backupCodes; track code) {\n            <code class=\"mfa-code\">{{ code }}</code>\n            }\n          </div>\n          <ion-button expand=\"block\" color=\"dark\" fill=\"outline\" (click)=\"copyCodes(setup.backupCodes)\">\n            {{ t('mfaCopyCodes') }}\n          </ion-button>\n        </div>\n        }\n\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('code-confirm') {\n        <val-title [props]=\"{ content: t('mfaConfirmTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text\n          [props]=\"{ size: 'medium', color: 'dark', bold: false, content: selectedMethod() === 'EMAIL' ? t('mfaConfirmPromptEmail') : t('mfaConfirmPromptSms') }\"\n        />\n\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"confirmCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaConfirmButton') }} }\n        </ion-button>\n\n        <p class=\"mfa-resend\">\n          {{ t('mfaNoCode') }} @if (resendCooldown() > 0) {\n          <span>{{ t('mfaResendIn') }} {{ resendCooldown() }}s</span>\n          } @else {\n          <a (click)=\"resendCode()\">{{ t('mfaResend') }}</a>\n          }\n        </p>\n\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } @case ('disable') { @if (hasPassword()) {\n        <val-form [props]=\"disableFormProps()\" (onSubmit)=\"onDisableSubmit($event)\" />\n        } @else if (mfaMethod() === 'TOTP') {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableTotpPrompt') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        } @else if (mfaMethod() === 'EMAIL' || mfaMethod() === 'SMS') {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        @if (!disableCodeSent()) {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableCodePrompt') }\" />\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"sendDisableCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableSendCode') }} }\n        </ion-button>\n        } @else {\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableCodePrompt') }\" />\n        <div class=\"mfa-pin\">\n          <val-pin-input [props]=\"pinInputProps\" />\n        </div>\n        <ion-button expand=\"block\" [disabled]=\"working()\" (click)=\"disableWithMfaCode()\">\n          @if (working()) {\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          } @else { {{ t('mfaDisableButton') }} }\n        </ion-button>\n        <ion-button expand=\"block\" fill=\"clear\" color=\"medium\" [disabled]=\"working()\" (click)=\"sendDisableCode()\">\n          {{ t('mfaDisableResendCode') }}\n        </ion-button>\n        } } @else {\n        <val-title [props]=\"{ content: t('mfaDisableTitle'), size: 'large', color: '', bold: false }\" />\n        <val-text [props]=\"{ size: 'medium', color: 'dark', bold: false, content: t('mfaDisableNeedsPassword') }\" />\n        }\n        <ion-button expand=\"block\" fill=\"clear\" color=\"dark\" (click)=\"backToStatus()\">\n          {{ t('mfaCancel') }}\n        </ion-button>\n        } }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".mfa-modal{display:flex;flex-direction:column;gap:14px;padding-top:4px}.mfa-loading{display:flex;justify-content:center;padding:40px 0}.mfa-status{display:inline-flex;align-items:center;width:fit-content;padding:4px 10px;border-radius:999px;font-size:13px;font-weight:600;margin:0}.mfa-status--on{color:var(--ion-color-success-shade);background:rgba(var(--ion-color-success-rgb),.12)}.mfa-status--off{color:var(--ion-color-medium-shade);background:var(--ion-color-light)}.mfa-secret-row{display:flex;align-items:center;gap:8px}.mfa-secret-row .mfa-secret{flex:1;margin:0}.mfa-secret-row ion-button{flex-shrink:0;--color: var(--ion-color-dark);margin:0}.mfa-error{color:var(--ion-color-danger);font-size:13px;margin:4px 0 0}.mfa-block,.mfa-backup{display:flex;flex-direction:column;gap:12px}.mfa-block{padding:16px;border-radius:14px;background:var(--ion-color-light)}.mfa-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;background:var(--ion-color-light);border-left:3px solid var(--ion-color-primary)}.mfa-alert ion-icon{font-size:20px;color:var(--ion-color-primary);flex-shrink:0;margin-top:1px}.mfa-alert p{margin:0;font-size:13px;line-height:1.45;color:var(--ion-color-dark)}.mfa-qr{display:flex;justify-content:center;padding:8px 0}.mfa-secret{display:block;padding:10px 12px;border-radius:8px;background:var(--ion-color-light);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;letter-spacing:.04em;word-break:break-all;text-align:center}.mfa-pin{display:flex;justify-content:center;padding:8px 0}.mfa-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px;border-radius:12px;background:var(--ion-color-light)}.mfa-code{padding:8px;border-radius:6px;background:var(--ion-background-color, #fff);color:var(--ion-color-dark);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;text-align:center}.mfa-method-list{display:flex;flex-direction:column;gap:8px}.mfa-method-card{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;border:1.5px solid var(--ion-border-color, rgba(var(--ion-color-dark-rgb), .14));background:transparent;cursor:pointer;text-align:left;width:100%;transition:border-color .15s ease,background .15s ease}.mfa-method-card--active{border-color:var(--ion-color-primary);background:rgba(var(--ion-color-primary-rgb),.07)}.mfa-method-card__dot{flex-shrink:0;width:18px;height:18px;border-radius:50%;border:2px solid var(--ion-color-medium);margin-top:2px;transition:border-color .15s,box-shadow .15s}.mfa-method-card--active .mfa-method-card__dot{border-color:var(--ion-color-primary);box-shadow:inset 0 0 0 4px var(--ion-color-primary)}.mfa-method-card__body{display:flex;flex-direction:column;gap:3px}.mfa-method-card__body strong{font-size:15px;font-weight:600;color:var(--ion-color-dark)}.mfa-method-card__body span{font-size:13px;color:var(--ion-color-medium);line-height:1.4}.mfa-resend{text-align:center;font-size:14px;color:var(--ion-color-dark);margin:4px 0}.mfa-resend a{color:var(--ion-color-primary);cursor:pointer;font-weight:600}\n"] }]
         }], ctorParameters: () => [], propDecorators: { isOpen: [{
                 type: Input
             }], prefillCode: [{
                 type: Input
             }], changed: [{
                 type: Output
+            }], enabledViaDeeplink: [{
+                type: Output
             }], dismissed: [{
                 type: Output
             }] } });
@@ -32301,7 +32921,7 @@ class WizardComponent {
         this.onClick = new EventEmitter();
         this.wrapperId = 'wizard-wrapper';
         this.currentStep = null;
-        this.currentStepTitles = null;
+        this.currentStepTitles = { title: '' };
         this.loadingText = 'Por favor espere...';
         this.cdr = inject(ChangeDetectorRef);
     }
@@ -32311,23 +32931,12 @@ class WizardComponent {
     ngOnChanges(changes) {
         if (changes['props']) {
             this.updateCurrentStep();
-            this.cdr.detectChanges();
         }
     }
     updateCurrentStep() {
         if (this.props?.steps && this.props?.current) {
             this.currentStep = this.props.steps[this.props.current];
-            // Forzar nueva referencia de objeto para asegurar detección de cambios
-            // Agregar timestamp para garantizar que es un objeto completamente nuevo
-            this.currentStepTitles = this.currentStep?.titles
-                ? {
-                    ...JSON.parse(JSON.stringify(this.currentStep.titles)),
-                    _timestamp: Date.now(), // Forzar nueva referencia
-                    _step: this.props.current, // Agregar identificador del paso
-                }
-                : null;
-            // Forzar detección de cambios inmediatamente
-            this.cdr.detectChanges();
+            this.currentStepTitles = this.currentStep?.titles ?? { title: '' };
         }
     }
     working() {
@@ -32355,7 +32964,7 @@ class WizardComponent {
         if (this.props?.steps && this.props?.current) {
             return this.props.steps[this.props.current];
         }
-        return this.currentStep || { titles: null, buttons: [] };
+        return this.currentStep || { titles: { title: '' }, buttons: [] };
     }
     setCurrent(newStep) {
         if (newStep === this.props.current) {
@@ -32363,24 +32972,19 @@ class WizardComponent {
         }
         this.props.current = newStep;
         this.updateCurrentStep();
-        // Forzar múltiples ciclos de detección de cambios
-        this.cdr.detectChanges();
-        setTimeout(() => {
-            this.cdr.detectChanges();
-        }, 0);
         goToTop(this.wrapperId);
     }
     setError(error) {
         if (this.props.state === ComponentStates.ERROR) {
             return;
         }
-        this.props.error.titles.bottomContent.content.bellowTitle.content = error;
+        this.props.error.titles.description = error;
         this.props.state = ComponentStates.ERROR;
         this.cdr.markForCheck();
         goToTop(this.wrapperId);
     }
     reset() {
-        this.props.error.titles.bottomContent.content.bellowTitle.content = '';
+        this.props.error.titles.description = '';
         this.done();
     }
     clickHandler(token) {
@@ -32396,7 +33000,7 @@ class WizardComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: WizardComponent, isStandalone: true, selector: "val-wizard", inputs: { props: "props" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: `
     <div [id]="wrapperId" class="wrapper">
       <ng-container *ngIf="props.state !== 'ERROR'">
-        <val-no-content [props]="currentStepTitles" [attr.data-step]="props.current"></val-no-content>
+        <val-empty-state [props]="currentStepTitles" [attr.data-step]="props.current"></val-empty-state>
         <div class="step">
           <div *ngIf="props.state === 'WORKING'">
             <val-content-loader
@@ -32412,17 +33016,17 @@ class WizardComponent {
         </div>
       </ng-container>
       <ng-container *ngIf="props.state === 'ERROR'">
-        <val-no-content [props]="props.error.titles" (onClick)="clickHandler($event)"></val-no-content>
+        <val-empty-state [props]="props.error.titles"></val-empty-state>
       </ng-container>
     </div>
-  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--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;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--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)}.wrapper{height:auto;display:flex;flex-direction:column;justify-content:space-between;position:relative;min-height:320px}.step{min-height:9.375rem;margin:16px 0;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NoContentComponent, selector: "val-no-content", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ContentLoaderComponent, selector: "val-content-loader", inputs: ["props"] }] }); }
+  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--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;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--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)}.wrapper{height:auto;display:flex;flex-direction:column;justify-content:space-between;position:relative;min-height:320px}.step{min-height:9.375rem;margin:16px 0;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EmptyStateComponent, selector: "val-empty-state", inputs: ["props"] }, { kind: "component", type: ContentLoaderComponent, selector: "val-content-loader", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WizardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-wizard', standalone: true, imports: [CommonModule, NoContentComponent, ContentLoaderComponent], template: `
+            args: [{ selector: 'val-wizard', standalone: true, imports: [CommonModule, EmptyStateComponent, ContentLoaderComponent], template: `
     <div [id]="wrapperId" class="wrapper">
       <ng-container *ngIf="props.state !== 'ERROR'">
-        <val-no-content [props]="currentStepTitles" [attr.data-step]="props.current"></val-no-content>
+        <val-empty-state [props]="currentStepTitles" [attr.data-step]="props.current"></val-empty-state>
         <div class="step">
           <div *ngIf="props.state === 'WORKING'">
             <val-content-loader
@@ -32438,7 +33042,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </div>
       </ng-container>
       <ng-container *ngIf="props.state === 'ERROR'">
-        <val-no-content [props]="props.error.titles" (onClick)="clickHandler($event)"></val-no-content>
+        <val-empty-state [props]="props.error.titles"></val-empty-state>
       </ng-container>
     </div>
   `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--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;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--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)}.wrapper{height:auto;display:flex;flex-direction:column;justify-content:space-between;position:relative;min-height:320px}.step{min-height:9.375rem;margin:16px 0;text-align:center}\n"] }]
@@ -44282,498 +44886,6 @@ function news() {
  */
 // Transformer
 
-/**
- * Token de inyección para la configuración de Feedback.
- */
-const VALTECH_FEEDBACK_CONFIG = new InjectionToken('ValtechFeedbackConfig');
-/**
- * Configuración por defecto.
- */
-const DEFAULT_FEEDBACK_CONFIG = {
-    feedbackPrefix: '/v1/feedback',
-    maxAttachments: 5,
-    // Estándar acordado para adjuntos de feedback: solo imágenes (JPEG/PNG/WebP)
-    // y PDF, máx 5 MB. Reflejado en `storage.rules` (path `users/{uid}/feedback/`).
-    maxFileSize: 5 * 1024 * 1024,
-    allowedFileTypes: ['image/jpeg', 'image/png', 'image/webp', 'application/pdf'],
-    storagePath: 'feedback',
-};
-/**
- * Provee el servicio de feedback a la aplicación Angular.
- *
- * @param config - Configuración de feedback
- * @returns EnvironmentProviders para usar en bootstrapApplication
- *
- * @example
- * ```typescript
- * // main.ts
- * import { bootstrapApplication } from '@angular/platform-browser';
- * import { provideValtechFeedback } from 'valtech-components';
- * import { environment } from './environments/environment';
- *
- * bootstrapApplication(AppComponent, {
- *   providers: [
- *     provideValtechAuth({ apiUrl: environment.apiUrl }),
- *     provideValtechFeedback({
- *       apiUrl: environment.apiUrl,
- *       appId: 'my-app-name',
- *     }),
- *   ],
- * });
- * ```
- */
-function provideValtechFeedback(config) {
-    const mergedConfig = {
-        ...DEFAULT_FEEDBACK_CONFIG,
-        ...config,
-    };
-    return makeEnvironmentProviders([{ provide: VALTECH_FEEDBACK_CONFIG, useValue: mergedConfig }]);
-}
-
-/**
- * Servicio para gestionar feedback de usuarios.
- *
- * @example
- * ```typescript
- * @Component({...})
- * export class MyComponent {
- *   private feedbackService = inject(FeedbackService);
- *
- *   async submitFeedback() {
- *     const response = await this.feedbackService.createAsync(
- *       'feedback',
- *       'Mi comentario',
- *       'Descripción detallada...'
- *     );
- *     console.log('Feedback enviado:', response.feedbackId);
- *   }
- * }
- * ```
- */
-class FeedbackService {
-    constructor() {
-        this.config = inject(VALTECH_FEEDBACK_CONFIG);
-        this.http = inject(HttpClient);
-        this.firestore = inject(FirestoreService, { optional: true });
-        this.storage = inject(StorageService, { optional: true });
-        this.auth = inject(AuthService, { optional: true });
-    }
-    /**
-     * URL base para endpoints de feedback.
-     */
-    get baseUrl() {
-        return `${this.config.apiUrl}${this.config.feedbackPrefix}`;
-    }
-    /**
-     * Captura el contexto del dispositivo automáticamente.
-     */
-    captureDeviceContext() {
-        const ua = navigator.userAgent;
-        return {
-            browser: this.detectBrowser(ua),
-            os: this.detectOS(ua),
-            viewport: `${window.innerWidth}x${window.innerHeight}`,
-            language: navigator.language,
-            userAgent: ua,
-            pageUrl: window.location.href,
-        };
-    }
-    /**
-     * Crea un nuevo feedback.
-     *
-     * @param type - Tipo de feedback
-     * @param title - Título del feedback
-     * @param description - Descripción detallada
-     * @param attachments - URLs de archivos adjuntos (opcional)
-     * @param contentRef - Referencia a contenido específico (opcional)
-     * @returns Observable con la respuesta
-     */
-    create(type, title, description, attachments = [], contentRef) {
-        const request = {
-            type,
-            title,
-            description,
-            attachments,
-            contentRef,
-            deviceContext: this.captureDeviceContext(),
-            appId: this.config.appId,
-        };
-        return this.http.post(this.baseUrl, request);
-    }
-    /**
-     * Crea un nuevo feedback (versión async/await).
-     */
-    async createAsync(type, title, description, attachments = [], contentRef) {
-        return firstValueFrom(this.create(type, title, description, attachments, contentRef));
-    }
-    /**
-     * Obtiene un feedback por ID (solo el propietario).
-     *
-     * @param feedbackId - ID del feedback
-     * @returns Observable con la respuesta
-     */
-    getById(feedbackId) {
-        return this.http.get(`${this.baseUrl}/${feedbackId}`);
-    }
-    /**
-     * Obtiene un feedback por ID (versión async/await).
-     */
-    async getByIdAsync(feedbackId) {
-        return firstValueFrom(this.getById(feedbackId));
-    }
-    /**
-     * Valida si un archivo cumple con las restricciones.
-     */
-    validateFile(file) {
-        // Verificar tamaño
-        if (file.size > this.config.maxFileSize) {
-            const maxSizeMB = Math.round(this.config.maxFileSize / (1024 * 1024));
-            return {
-                valid: false,
-                error: `El archivo excede el tamaño máximo de ${maxSizeMB}MB`,
-            };
-        }
-        // Verificar tipo
-        const allowedTypes = this.config.allowedFileTypes || [];
-        const isAllowed = allowedTypes.some(pattern => {
-            if (pattern.endsWith('/*')) {
-                const baseType = pattern.replace('/*', '');
-                return file.type.startsWith(baseType);
-            }
-            return file.type === pattern;
-        });
-        if (!isAllowed) {
-            return {
-                valid: false,
-                error: 'Tipo de archivo no permitido',
-            };
-        }
-        return { valid: true };
-    }
-    /**
-     * Valida el CONTENIDO del archivo por magic-bytes (firma binaria) —
-     * defensa contra spoofing del content-type declarado. Lee los primeros 12
-     * bytes y los compara con las firmas de JPEG/PNG/WebP/PDF (whitelist
-     * estricta). Es client-side, ergo bypasseable; la defensa real vive en las
-     * Storage rules. Esto corta el 99% de los casos accidentales o no-targeted.
-     */
-    async validateFileContent(file) {
-        const buf = await file.slice(0, 12).arrayBuffer();
-        const b = new Uint8Array(buf);
-        // JPEG: FF D8 FF
-        if (b[0] === 0xff && b[1] === 0xd8 && b[2] === 0xff) {
-            return { valid: true };
-        }
-        // PNG: 89 50 4E 47 0D 0A 1A 0A
-        if (b[0] === 0x89 &&
-            b[1] === 0x50 &&
-            b[2] === 0x4e &&
-            b[3] === 0x47 &&
-            b[4] === 0x0d &&
-            b[5] === 0x0a &&
-            b[6] === 0x1a &&
-            b[7] === 0x0a) {
-            return { valid: true };
-        }
-        // WebP: "RIFF" (0..3) + "WEBP" (8..11)
-        if (b[0] === 0x52 &&
-            b[1] === 0x49 &&
-            b[2] === 0x46 &&
-            b[3] === 0x46 &&
-            b[8] === 0x57 &&
-            b[9] === 0x45 &&
-            b[10] === 0x42 &&
-            b[11] === 0x50) {
-            return { valid: true };
-        }
-        // PDF: "%PDF-"
-        if (b[0] === 0x25 && b[1] === 0x50 && b[2] === 0x44 && b[3] === 0x46 && b[4] === 0x2d) {
-            return { valid: true };
-        }
-        return {
-            valid: false,
-            error: 'El contenido del archivo no coincide con un tipo permitido (imagen o PDF).',
-        };
-    }
-    /**
-     * Sube un adjunto a Firebase Storage en `users/{uid}/feedback/{uuid}/{name}`
-     * y devuelve su download URL. Ejecuta tres validaciones en orden:
-     *   1. tamaño + tipo declarado (`validateFile`)
-     *   2. contenido por magic-bytes (`validateFileContent`)
-     *   3. usuario autenticado (no soportamos adjuntos en feedback anónimo)
-     *
-     * Si cualquier validación falla → rechaza la promesa con un Error legible;
-     * el componente que la consuma debe cancelar la operación de adjuntar.
-     */
-    async uploadAttachment(file) {
-        const sizeTypeCheck = this.validateFile(file);
-        if (!sizeTypeCheck.valid) {
-            throw new Error(sizeTypeCheck.error);
-        }
-        const contentCheck = await this.validateFileContent(file);
-        if (!contentCheck.valid) {
-            throw new Error(contentCheck.error);
-        }
-        const userId = this.auth?.user()?.userId;
-        if (!userId) {
-            throw new Error('Debes iniciar sesión para adjuntar archivos.');
-        }
-        if (!this.storage) {
-            throw new Error('StorageService no está configurado.');
-        }
-        // Path bajo `users/{uid}/feedback/` — sibling de `files/`, con su propia
-        // regla en `storage.rules` (whitelist estricta JPEG/PNG/WebP/PDF + 5MB).
-        // skipPrefix=true porque `users/{uid}/` es path GLOBAL cross-app.
-        const uuid = typeof crypto !== 'undefined' && 'randomUUID' in crypto
-            ? crypto.randomUUID()
-            : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
-        const safeName = file.name.replace(/[^a-zA-Z0-9._-]/g, '_');
-        const path = `users/${userId}/feedback/${uuid}/${safeName}`;
-        const result = await this.storage.uploadAndGetUrl(path, file, {
-            contentType: file.type,
-            skipPrefix: true,
-        });
-        return result.downloadUrl;
-    }
-    /**
-     * Obtiene la configuración actual del servicio.
-     */
-    getConfig() {
-        return this.config;
-    }
-    // =========================================================================
-    // Reaction Methods (Content feedback with emojis)
-    // =========================================================================
-    /**
-     * Verifica si el usuario ya dio feedback para una entidad específica.
-     *
-     * Primero intenta leer de Firebase (rápido, sin latencia de red al backend).
-     * Si Firebase no está disponible o falla, hace fallback a la API.
-     *
-     * @param entityType - Tipo de entidad (article, docs, feature, etc.)
-     * @param entityId - ID de la entidad
-     * @returns Promise con la respuesta de verificación
-     *
-     * @example
-     * ```typescript
-     * const check = await this.feedbackService.checkFeedback('article', 'art-123');
-     * if (check.hasFeedback) {
-     *   console.log('Ya dio feedback:', check.reactionValue);
-     * }
-     * ```
-     */
-    async checkFeedback(entityType, entityId) {
-        // Si no hay usuario autenticado, no puede haber feedback previo
-        // Retornar inmediatamente sin llamar al API (evita 401 y redirect a login)
-        const userId = this.auth?.user()?.userId;
-        if (!userId) {
-            return { operationId: '', hasFeedback: false };
-        }
-        // 1. Intentar Firebase primero (si está disponible)
-        if (this.firestore) {
-            try {
-                // Path: feedback/{entityType}/{entityId}/{userId}
-                // FirestoreService agrega automáticamente el prefijo apps/{appId}/
-                const collectionPath = `feedback/${entityType}/${entityId}`;
-                const doc = await this.firestore.getDoc(collectionPath, userId);
-                if (doc) {
-                    return {
-                        operationId: '',
-                        hasFeedback: true,
-                        feedbackId: doc.feedbackId,
-                        type: doc.type,
-                        reactionValue: doc.reactionValue,
-                        createdAt: doc.createdAt?.toISOString(),
-                    };
-                }
-                // Doc no existe = no hay feedback
-                return { operationId: '', hasFeedback: false };
-            }
-            catch (error) {
-                console.warn('[FeedbackService] Firebase check failed, falling back to API:', error);
-                // Fallback a API
-            }
-        }
-        // 2. Fallback: llamar API (solo si hay usuario autenticado)
-        const params = new URLSearchParams({
-            appId: this.config.appId,
-            entityType,
-            entityId,
-        });
-        return firstValueFrom(this.http.get(`${this.baseUrl}/check?${params}`));
-    }
-    /**
-     * Crea o actualiza una reacción (feedback con emoji).
-     *
-     * @param entityRef - Referencia a la entidad
-     * @param value - Valor de la reacción (negative, neutral, positive)
-     * @param comment - Comentario opcional (máx 500 caracteres)
-     * @returns Promise con la respuesta
-     *
-     * @example
-     * ```typescript
-     * const response = await this.feedbackService.createReaction(
-     *   { entityType: 'article', entityId: 'art-123' },
-     *   'positive',
-     *   'Muy útil!'
-     * );
-     * ```
-     */
-    async createReaction(entityRef, value, comment) {
-        const request = {
-            type: 'reaction',
-            entityRef,
-            reactionValue: value,
-            description: comment || '',
-            deviceContext: this.captureDeviceContext(),
-            appId: this.config.appId,
-        };
-        return firstValueFrom(this.http.post(this.baseUrl, request));
-    }
-    /**
-     * Crea feedback anónimo (sin autenticación requerida).
-     * Usado para blogs, FAQs y contenido público.
-     *
-     * @param entityRef - Referencia a la entidad
-     * @param value - Valor de la reacción (negative, neutral, positive)
-     * @param comment - Comentario opcional (máx 500 caracteres)
-     * @returns Promise con la respuesta
-     *
-     * @example
-     * ```typescript
-     * // En un blog público
-     * const response = await this.feedbackService.createAnonymousReaction(
-     *   { entityType: 'blog', entityId: 'my-post-slug' },
-     *   'positive'
-     * );
-     * ```
-     */
-    async createAnonymousReaction(entityRef, value, comment) {
-        const request = {
-            type: 'reaction',
-            entityRef,
-            reactionValue: value,
-            description: comment || '',
-            deviceContext: this.captureDeviceContext(),
-            appId: this.config.appId,
-        };
-        return firstValueFrom(this.http.post(`${this.baseUrl}/anonymous`, request));
-    }
-    // =========================================================================
-    // Helpers privados para detección de browser/OS
-    // =========================================================================
-    detectBrowser(ua) {
-        if (ua.includes('Edg/'))
-            return 'Edge';
-        if (ua.includes('Chrome/'))
-            return 'Chrome';
-        if (ua.includes('Firefox/'))
-            return 'Firefox';
-        if (ua.includes('Safari/') && !ua.includes('Chrome'))
-            return 'Safari';
-        if (ua.includes('Opera') || ua.includes('OPR/'))
-            return 'Opera';
-        return 'Unknown';
-    }
-    detectOS(ua) {
-        if (ua.includes('Windows NT 10'))
-            return 'Windows 10';
-        if (ua.includes('Windows NT 11'))
-            return 'Windows 11';
-        if (ua.includes('Windows'))
-            return 'Windows';
-        if (ua.includes('Mac OS X')) {
-            const match = ua.match(/Mac OS X (\d+[._]\d+)/);
-            if (match) {
-                return `macOS ${match[1].replace('_', '.')}`;
-            }
-            return 'macOS';
-        }
-        if (ua.includes('Android'))
-            return 'Android';
-        if (ua.includes('iPhone') || ua.includes('iPad'))
-            return 'iOS';
-        if (ua.includes('Linux'))
-            return 'Linux';
-        return 'Unknown';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FeedbackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FeedbackService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FeedbackService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-/**
- * Configuración por defecto de tipos de feedback.
- */
-const DEFAULT_FEEDBACK_TYPE_OPTIONS = [
-    {
-        value: 'issue',
-        label: 'Reportar problema',
-        description: 'Algo no funciona correctamente',
-        icon: 'bug-outline',
-    },
-    {
-        value: 'poor-content',
-        label: 'Contenido incorrecto',
-        description: 'Información incorrecta o desactualizada',
-        icon: 'document-text-outline',
-    },
-    {
-        value: 'feedback',
-        label: 'Comentario general',
-        description: 'Tu opinión o experiencia',
-        icon: 'chatbubble-outline',
-    },
-    {
-        value: 'suggestion',
-        label: 'Sugerencia',
-        description: 'Propuesta de mejora o nueva funcionalidad',
-        icon: 'bulb-outline',
-    },
-];
-
-/**
- * Valtech Feedback Service
- *
- * Servicio para gestionar feedback de usuarios a nivel de plataforma.
- *
- * @example
- * ```typescript
- * // main.ts - Configuración
- * import { provideValtechFeedback } from 'valtech-components';
- *
- * bootstrapApplication(AppComponent, {
- *   providers: [
- *     provideValtechAuth({ apiUrl: environment.apiUrl }),
- *     provideValtechFeedback({
- *       apiUrl: environment.apiUrl,
- *       appId: 'my-app-name',
- *     }),
- *   ],
- * });
- *
- * // component.ts - Uso
- * import { FeedbackService } from 'valtech-components';
- *
- * @Component({...})
- * export class MyComponent {
- *   private feedbackService = inject(FeedbackService);
- *
- *   async submitFeedback() {
- *     const response = await this.feedbackService.createAsync(
- *       'feedback',
- *       'Título',
- *       'Descripción...'
- *     );
- *   }
- * }
- * ```
- */
-// Configuration
-
 /**
  * Token de inyección para la configuración de Donation/Support.
  */
@@ -44926,317 +45038,200 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * ```
  */
 
-/**
- * val-feedback-form
- *
- * Formulario reutilizable para enviar feedback desde cualquier parte de la aplicación.
- *
- * @example
- * ```html
- * <!-- Feedback general -->
- * <val-feedback-form
- *   [props]="{ defaultType: 'feedback', showTypeSelector: true }"
- *   (onSubmit)="handleSuccess($event)"
- *   (onCancel)="closeModal()"
- * />
- *
- * <!-- Reportar contenido incorrecto -->
- * <val-feedback-form
- *   [props]="{
- *     defaultType: 'poor-content',
- *     showTypeSelector: false,
- *     contentRef: { contentId: article.id, contentType: 'article' },
- *     submitButtonText: 'Reportar contenido'
- *   }"
- * />
- * ```
- */
 class FeedbackFormComponent {
     constructor() {
-        /**
-         * Configuración del formulario.
-         */
         this.props = {};
-        /**
-         * Evento emitido cuando el feedback se envía exitosamente.
-         */
         this.onSubmit = new EventEmitter();
-        /**
-         * Evento emitido cuando el usuario cancela.
-         */
         this.onCancel = new EventEmitter();
-        this.fb = inject(FormBuilder);
-        this.feedbackService = inject(FeedbackService);
         this.i18n = inject(I18nService);
+        this.feedbackService = inject(FeedbackService);
         this.typeOptions = DEFAULT_FEEDBACK_TYPE_OPTIONS;
         this.isSubmitting = signal(false);
         this.isSuccess = signal(false);
         this.error = signal(null);
-        addIcons({
-            bugOutline,
-            bulbOutline,
-            chatbubbleOutline,
-            checkmarkCircleOutline,
-            closeCircleOutline,
-            documentTextOutline,
-        });
+        this.currentAttachments = [];
+        addIcons({ checkmarkCircleOutline, closeCircleOutline });
     }
     ngOnInit() {
-        // Filtrar tipos habilitados si se especifica
         if (this.props.enabledTypes?.length) {
             this.typeOptions = this.typeOptions.filter(opt => this.props.enabledTypes.includes(opt.value));
         }
-        // Usar opciones personalizadas si se proporcionan
         if (this.props.typeOptions?.length) {
             this.typeOptions = this.props.typeOptions;
         }
-        // Inicializar formulario
-        this.form = this.fb.group({
-            type: [this.props.defaultType || 'feedback', Validators.required],
-            title: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(200)]],
-            description: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(5000)]],
+        this.formProps = this.buildFormProps();
+    }
+    buildFormProps() {
+        const fields = [];
+        if (this.props.showTypeSelector !== false) {
+            const options = this.typeOptions.map((opt, i) => ({
+                id: opt.value,
+                name: opt.label,
+                order: i,
+                selected: opt.value === (this.props.defaultType ?? 'feedback'),
+            }));
+            fields.push({
+                token: 'feedback-type',
+                name: 'type',
+                label: this.i18n.t('feedbackType'),
+                hint: '',
+                placeholder: '',
+                type: InputType.SELECT,
+                order: 1,
+                validators: [Validators.required],
+                options,
+                value: this.props.defaultType ?? 'feedback',
+                errors: {},
+                state: ComponentStates.ENABLED,
+            });
+        }
+        fields.push({
+            token: 'feedback-title',
+            name: 'title',
+            label: this.props.titleLabel ?? this.i18n.t('title'),
+            hint: '',
+            placeholder: this.props.titlePlaceholder ?? this.i18n.t('titlePlaceholder'),
+            type: InputType.TEXT,
+            order: 2,
+            validators: [Validators.required, Validators.minLength(5), Validators.maxLength(200)],
+            errors: {
+                required: this.i18n.t('titleValidation'),
+                minlength: this.i18n.t('titleValidation'),
+                maxlength: this.i18n.t('titleValidation'),
+            },
+            state: ComponentStates.ENABLED,
+        }, {
+            token: 'feedback-description',
+            name: 'description',
+            label: this.props.descriptionLabel ?? this.i18n.t('description'),
+            hint: '',
+            placeholder: this.props.descriptionPlaceholder ?? this.i18n.t('descriptionPlaceholder'),
+            type: InputType.TEXTAREA,
+            order: 3,
+            range: { min: 10, max: 5000 },
+            validators: [Validators.required, Validators.minLength(10), Validators.maxLength(5000)],
+            errors: {
+                required: this.i18n.t('descriptionValidation'),
+                minlength: this.i18n.t('descriptionValidation'),
+                maxlength: this.i18n.t('descriptionValidation'),
+            },
+            state: ComponentStates.ENABLED,
         });
+        return {
+            name: '',
+            sections: [{ name: '', order: 0, fields }],
+            actions: {
+                type: 'submit',
+                color: 'primary',
+                text: this.props.submitButtonText ?? this.i18n.t('submit'),
+                state: ComponentStates.ENABLED,
+                expand: 'block',
+            },
+            state: ComponentStates.ENABLED,
+        };
     }
-    async handleSubmit() {
-        if (this.form.invalid || this.isSubmitting())
+    async handleFormSubmit(submitted) {
+        if (this.isSubmitting())
+            return;
+        if (this.currentAttachments.some(a => a.status === 'uploading'))
             return;
         this.isSubmitting.set(true);
         this.error.set(null);
         this.isSuccess.set(false);
+        this.formProps.state = ComponentStates.WORKING;
+        this.formProps.actions.state = ComponentStates.WORKING;
         try {
-            const { type, title, description } = this.form.value;
-            const response = await this.feedbackService.createAsync(type, title, description, [], // attachments (por ahora vacío)
-            this.props.contentRef);
+            const type = submitted.fields['type'] ?? this.props.defaultType ?? 'feedback';
+            const title = submitted.fields['title'];
+            const description = submitted.fields['description'];
+            const attachmentUrls = this.currentAttachments.filter(a => a.status === 'ready').map(a => a.url);
+            const response = await this.feedbackService.createAsync(type, title, description, attachmentUrls, this.props.contentRef);
             this.isSuccess.set(true);
-            this.form.reset({ type: this.props.defaultType || 'feedback' });
-            this.onSubmit.emit({
-                response,
-                type: type,
-                title,
-            });
+            this.onSubmit.emit({ response, type, title, attachmentUrls });
         }
         catch (err) {
             this.error.set(err.error?.message || err.message || this.i18n.t('feedbackError'));
         }
         finally {
             this.isSubmitting.set(false);
+            this.formProps.state = ComponentStates.ENABLED;
+            this.formProps.actions.state = ComponentStates.ENABLED;
         }
     }
+    onAttachmentsChange(items) {
+        this.currentAttachments = items;
+    }
     onCancelClick() {
         this.onCancel.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FeedbackFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FeedbackFormComponent, isStandalone: true, selector: "val-feedback-form", inputs: { props: "props" }, outputs: { onSubmit: "onSubmit", onCancel: "onCancel" }, ngImport: i0, template: `
-    <form
-      [formGroup]="form"
-      (ngSubmit)="handleSubmit()"
-      class="feedback-form"
-      [class.compact]="props.compact"
-      [ngClass]="props.cssClass"
-    >
-      <!-- Type selector -->
-      @if (props.showTypeSelector !== false) {
-        <ion-item>
-          <ion-select
-            formControlName="type"
-            [label]="i18n.t('feedbackType')"
-            labelPlacement="floating"
-            interface="popover"
-          >
-            @for (option of typeOptions; track option.value) {
-              <ion-select-option [value]="option.value">
-                {{ option.label }}
-              </ion-select-option>
-            }
-          </ion-select>
-        </ion-item>
-      }
-
-      <!-- Title -->
-      <ion-item>
-        <ion-textarea
-          formControlName="title"
-          [label]="props.titleLabel || i18n.t('title')"
-          labelPlacement="floating"
-          [placeholder]="props.titlePlaceholder || i18n.t('titlePlaceholder')"
-          [maxlength]="200"
-          [counter]="true"
-          [autoGrow]="false"
-          rows="1"
-        ></ion-textarea>
-      </ion-item>
-      @if (form.get('title')?.invalid && form.get('title')?.touched) {
-        <ion-note color="danger" class="ion-padding-start">
-          {{ i18n.t('titleValidation') }}
-        </ion-note>
-      }
-
-      <!-- Description -->
-      <ion-item>
-        <ion-textarea
-          formControlName="description"
-          [label]="props.descriptionLabel || i18n.t('description')"
-          labelPlacement="floating"
-          [placeholder]="props.descriptionPlaceholder || i18n.t('descriptionPlaceholder')"
-          [maxlength]="5000"
-          [counter]="true"
-          [autoGrow]="true"
-          rows="4"
-        ></ion-textarea>
-      </ion-item>
-      @if (form.get('description')?.invalid && form.get('description')?.touched) {
-        <ion-note color="danger" class="ion-padding-start">
-          {{ i18n.t('descriptionValidation') }}
-        </ion-note>
-      }
-
-      <!-- Error message -->
-      @if (error()) {
-        <div class="feedback-alert error">
-          <ion-icon name="close-circle-outline"></ion-icon>
-          <span>{{ error() }}</span>
-        </div>
-      }
-
-      <!-- Success message -->
-      @if (isSuccess()) {
-        <div class="feedback-alert success">
-          <ion-icon name="checkmark-circle-outline"></ion-icon>
-          <span>{{ props.successMessage || i18n.t('feedbackSuccess') }}</span>
-        </div>
-      }
+    <div class="feedback-form-wrapper" [class.compact]="props.compact" [ngClass]="props.cssClass">
+      <val-form [props]="formProps" (onSubmit)="handleFormSubmit($event)">
+        @if (props.showAttachments !== false) {
+          <val-attachment-uploader
+            [props]="{ maxFiles: 5 }"
+            (attachmentsChange)="onAttachmentsChange($event)"
+          ></val-attachment-uploader>
+        }
+
+        @if (error()) {
+          <div class="feedback-alert error">
+            <ion-icon name="close-circle-outline"></ion-icon>
+            <span>{{ error() }}</span>
+          </div>
+        }
 
-      <!-- Actions -->
-      <div class="form-actions">
-        @if (props.cancelButtonText) {
-          <ion-button fill="outline" color="medium" type="button" (click)="onCancelClick()">
-            {{ props.cancelButtonText }}
-          </ion-button>
+        @if (isSuccess()) {
+          <div class="feedback-alert success">
+            <ion-icon name="checkmark-circle-outline"></ion-icon>
+            <span>{{ props.successMessage || i18n.t('feedbackSuccess') }}</span>
+          </div>
         }
-        <ion-button type="submit" [disabled]="form.invalid || isSubmitting()" expand="block">
-          @if (isSubmitting()) {
-            <ion-spinner name="circular"></ion-spinner>
-          } @else {
-            {{ props.submitButtonText || i18n.t('submit') }}
-          }
+      </val-form>
+
+      @if (props.cancelButtonText) {
+        <ion-button fill="outline" color="medium" expand="block" class="cancel-button" (click)="onCancelClick()">
+          {{ props.cancelButtonText }}
         </ion-button>
-      </div>
-    </form>
-  `, isInline: true, styles: [".feedback-form{display:flex;flex-direction:column;gap:8px;&.compact{gap:4px}}.form-actions{display:flex;gap:8px;margin-top:16px;justify-content:flex-end;ion-button{flex:1}}.feedback-alert{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:8px;margin-top:8px;&.error{background-color:var(--ion-color-danger-tint);color:var(--ion-color-danger-shade)}&.success{background-color:var(--ion-color-success-tint);color:var(--ion-color-success-shade)}ion-icon{font-size:20px}}ion-note{font-size:12px;margin-top:-4px;margin-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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"] }, { 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: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "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"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { 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"] }] }); }
+      }
+    </div>
+  `, isInline: true, styles: [".feedback-form-wrapper{display:flex;flex-direction:column;gap:8px;&.compact{gap:4px}}.feedback-alert{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:8px;margin-top:8px;&.error{background-color:var(--ion-color-danger-tint);color:var(--ion-color-danger-shade)}&.success{background-color:var(--ion-color-success-tint);color:var(--ion-color-success-shade)}ion-icon{font-size:20px}}.cancel-button{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }, { kind: "component", type: AttachmentUploaderComponent, selector: "val-attachment-uploader", inputs: ["props"], outputs: ["attachmentsChange"] }, { 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: "18.2.14", ngImport: i0, type: FeedbackFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-feedback-form', standalone: true, imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        IonButton,
-                        IonIcon,
-                        IonItem,
-                        IonLabel,
-                        IonList,
-                        IonNote,
-                        IonSelect,
-                        IonSelectOption,
-                        IonSpinner,
-                        IonText,
-                        IonTextarea,
-                    ], template: `
-    <form
-      [formGroup]="form"
-      (ngSubmit)="handleSubmit()"
-      class="feedback-form"
-      [class.compact]="props.compact"
-      [ngClass]="props.cssClass"
-    >
-      <!-- Type selector -->
-      @if (props.showTypeSelector !== false) {
-        <ion-item>
-          <ion-select
-            formControlName="type"
-            [label]="i18n.t('feedbackType')"
-            labelPlacement="floating"
-            interface="popover"
-          >
-            @for (option of typeOptions; track option.value) {
-              <ion-select-option [value]="option.value">
-                {{ option.label }}
-              </ion-select-option>
-            }
-          </ion-select>
-        </ion-item>
-      }
-
-      <!-- Title -->
-      <ion-item>
-        <ion-textarea
-          formControlName="title"
-          [label]="props.titleLabel || i18n.t('title')"
-          labelPlacement="floating"
-          [placeholder]="props.titlePlaceholder || i18n.t('titlePlaceholder')"
-          [maxlength]="200"
-          [counter]="true"
-          [autoGrow]="false"
-          rows="1"
-        ></ion-textarea>
-      </ion-item>
-      @if (form.get('title')?.invalid && form.get('title')?.touched) {
-        <ion-note color="danger" class="ion-padding-start">
-          {{ i18n.t('titleValidation') }}
-        </ion-note>
-      }
-
-      <!-- Description -->
-      <ion-item>
-        <ion-textarea
-          formControlName="description"
-          [label]="props.descriptionLabel || i18n.t('description')"
-          labelPlacement="floating"
-          [placeholder]="props.descriptionPlaceholder || i18n.t('descriptionPlaceholder')"
-          [maxlength]="5000"
-          [counter]="true"
-          [autoGrow]="true"
-          rows="4"
-        ></ion-textarea>
-      </ion-item>
-      @if (form.get('description')?.invalid && form.get('description')?.touched) {
-        <ion-note color="danger" class="ion-padding-start">
-          {{ i18n.t('descriptionValidation') }}
-        </ion-note>
-      }
-
-      <!-- Error message -->
-      @if (error()) {
-        <div class="feedback-alert error">
-          <ion-icon name="close-circle-outline"></ion-icon>
-          <span>{{ error() }}</span>
-        </div>
-      }
-
-      <!-- Success message -->
-      @if (isSuccess()) {
-        <div class="feedback-alert success">
-          <ion-icon name="checkmark-circle-outline"></ion-icon>
-          <span>{{ props.successMessage || i18n.t('feedbackSuccess') }}</span>
-        </div>
-      }
+            args: [{ selector: 'val-feedback-form', standalone: true, imports: [CommonModule, FormComponent, AttachmentUploaderComponent, IonButton, IonIcon], template: `
+    <div class="feedback-form-wrapper" [class.compact]="props.compact" [ngClass]="props.cssClass">
+      <val-form [props]="formProps" (onSubmit)="handleFormSubmit($event)">
+        @if (props.showAttachments !== false) {
+          <val-attachment-uploader
+            [props]="{ maxFiles: 5 }"
+            (attachmentsChange)="onAttachmentsChange($event)"
+          ></val-attachment-uploader>
+        }
+
+        @if (error()) {
+          <div class="feedback-alert error">
+            <ion-icon name="close-circle-outline"></ion-icon>
+            <span>{{ error() }}</span>
+          </div>
+        }
 
-      <!-- Actions -->
-      <div class="form-actions">
-        @if (props.cancelButtonText) {
-          <ion-button fill="outline" color="medium" type="button" (click)="onCancelClick()">
-            {{ props.cancelButtonText }}
-          </ion-button>
+        @if (isSuccess()) {
+          <div class="feedback-alert success">
+            <ion-icon name="checkmark-circle-outline"></ion-icon>
+            <span>{{ props.successMessage || i18n.t('feedbackSuccess') }}</span>
+          </div>
         }
-        <ion-button type="submit" [disabled]="form.invalid || isSubmitting()" expand="block">
-          @if (isSubmitting()) {
-            <ion-spinner name="circular"></ion-spinner>
-          } @else {
-            {{ props.submitButtonText || i18n.t('submit') }}
-          }
+      </val-form>
+
+      @if (props.cancelButtonText) {
+        <ion-button fill="outline" color="medium" expand="block" class="cancel-button" (click)="onCancelClick()">
+          {{ props.cancelButtonText }}
         </ion-button>
-      </div>
-    </form>
-  `, styles: [".feedback-form{display:flex;flex-direction:column;gap:8px;&.compact{gap:4px}}.form-actions{display:flex;gap:8px;margin-top:16px;justify-content:flex-end;ion-button{flex:1}}.feedback-alert{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:8px;margin-top:8px;&.error{background-color:var(--ion-color-danger-tint);color:var(--ion-color-danger-shade)}&.success{background-color:var(--ion-color-success-tint);color:var(--ion-color-success-shade)}ion-icon{font-size:20px}}ion-note{font-size:12px;margin-top:-4px;margin-bottom:8px}\n"] }]
+      }
+    </div>
+  `, styles: [".feedback-form-wrapper{display:flex;flex-direction:column;gap:8px;&.compact{gap:4px}}.feedback-alert{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:8px;margin-top:8px;&.error{background-color:var(--ion-color-danger-tint);color:var(--ion-color-danger-shade)}&.success{background-color:var(--ion-color-success-tint);color:var(--ion-color-success-shade)}ion-icon{font-size:20px}}.cancel-button{margin-top:8px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }], onSubmit: [{
@@ -48217,5 +48212,5 @@ function buildFooterLinks(links, t, resolver) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_CARD_DEFAULTS, AD_SIZE_MAP, API_TABLE_COLUMN_LABELS, ARTICLE_SPACING, AVATAR_UPLOAD_DEFAULTS, AccordionComponent, ActionCardComponent, ActionHeaderComponent, ActionType, AdSlotComponent, AdsLoaderService, AdsService, AlertBoxComponent, AnalyticsErrorHandler, AnalyticsRouterTracker, AnalyticsService, AppConfigService, AppVersionService, ArticleBuilder, ArticleComponent, AuthBackgroundComponent, AuthService, AuthStateService, AuthStorageService, AuthSyncService, AvatarComponent, AvatarUploadComponent, BOTTOM_NAV_DEFAULTS, BannerComponent, BaseDefault, BlogPostBuilder, BottomNavComponent, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CALLOUT_LABELS, CHEV_KEYS, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, ChangePasswordModalComponent, CheckInputComponent, CheckboxRadioInputComponent, ChipGroupComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContainerComponent, ContentLoaderComponent, ContentReactionComponent, ContentTransformer, CookieBannerComponent, CountdownComponent, CurrencyInputComponent, DEFAULT_ADS_CONFIG, DEFAULT_APP_CONFIG_SERVICE_CONFIG, DEFAULT_APP_VERSION_SERVICE_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_BACK_HEADER, DEFAULT_CANCEL_BUTTON, DEFAULT_CHECK_INTERVAL_MS, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, DEFAULT_DEBUG_CONSOLE_CONFIG, DEFAULT_DONATION_CONFIG, DEFAULT_EMPTY_STATE, DEFAULT_EMULATOR_CONFIG, DEFAULT_FEEDBACK_CONFIG, DEFAULT_FEEDBACK_TYPE_OPTIONS, DEFAULT_HOME_HEADER, DEFAULT_INFINITE_LIST_METADATA, DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLATFORMS, DEFAULT_REFRESHER_METADATA, DEFAULT_SKELETON_CONFIG, DataTableComponent, DateInputComponent, DateRangeInputComponent, DebugConsoleComponent, DetailSkeletonComponent, DeviceService, DisplayComponent, DividerComponent, DocsApiTableComponent, DocsBreadcrumbComponent, DocsBuilder, DocsCalloutComponent, DocsCodeExampleComponent, DocsLayoutComponent, DocsNavLinksComponent, DocsNavigationService, DocsPageComponent, DocsSearchComponent, DocsSectionComponent, DocsShellComponent, DocsSidebarComponent, DocsTocComponent, DonationService, DownloadService, EmailInputComponent, EmptyStateComponent, ExpandableTextComponent, FEATURES_LIST_DEFAULTS, FabComponent, FaqComponent, FeaturesListComponent, FeedbackFormComponent, FeedbackService, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FooterComponent, FooterLinksComponent, FormComponent, FormFooterComponent, FormSkeletonComponent, FunHeaderComponent, GlassComponent, GlowCardComponent, GlowComponent, GridSkeletonComponent, HANDOFF_ROUTE_PARAM, HANDOFF_TOKEN_PARAM, HandoffService, HeaderComponent, HintComponent, HorizontalScrollComponent, HourInputComponent, HrefComponent, I18nService, IMAGE_DEFAULTS, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, Icon, IconComponent, IconService, ImageComponent, ImageCropComponent, ImageService, InAppBrowserService, InfiniteListComponent, InfoComponent, InputI18nHelper, InputType, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LEGAL_CONTENT_CONFIG, LOGIN_DEFAULTS, LanguageSelectorComponent, LayeredCardComponent, LegalContentService, LegalLinkService, LinkComponent, LinkProcessorService, LinkedProvidersComponent, LinksAccordionComponent, LinksCakeComponent, ListSkeletonComponent, LoadingDirective, LocalStorageService, LocaleService, LoginComponent, MODAL_SIZES, MOTIF_KEYS, MOTION, MaintenancePageComponent, MarkdownArticleParserService, MenuComponent, MessagingService, MetaService, MfaModalComponent, ModalService, ModalShellComponent, MultiSelectSearchComponent, NavigationService, NewsBuilder, NoContentComponent, NotesBoxComponent, NotificationActionService, NotificationsService, NumberFromToComponent, NumberInputComponent, NumberStepperComponent, OAUTH_PROVIDERS_INFO, OAuthCallbackComponent, OAuthService, OrgSwitchService, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PATTERN_MOTIFS, PATTERN_PALETTES, PLATFORM_CONFIGS, PageContentComponent, PageLinksComponent, PageRefreshService, PageTemplateComponent, PageWrapperComponent, PaginationComponent, PaginationService, PasswordInputComponent, PatternComponent, PhoneInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PreferencesService, PresetService, PriceTagComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProcessLinksPipe, ProfileSkeletonComponent, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QueryBuilder, QuoteBoxComponent, RadioInputComponent, RangeInputComponent, RatingComponent, RefresherComponent, RightsFooterComponent, RotatingTextComponent, SHAPE_KEYS, SKELETON_LAYOUT_DEFAULT_ROWS, SKELETON_PRESETS, SOLID_KEYS, SearchSelectorComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SegmentControlComponent, SelectSearchComponent, SessionService, ShareButtonsComponent, SimpleComponent, SkeletonComponent, SkeletonLayoutComponent, SkeletonService, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, StatsCardComponent, StepperComponent, StorageService, SwipeCarouselComponent, TRI_KEYS, TabbedContentComponent, TableSkeletonComponent, TabsComponent, Terminal404Component, TestimonialCardComponent, TestimonialCarouselComponent, TextComponent, TextInputComponent, TextareaInputComponent, ThemeOption, ThemeService, TimelineComponent, TitleBlockComponent, TitleComponent, ToastService, ToggleInputComponent, TokenService, ToolbarActionType, ToolbarComponent, TranslatePipe, TypedCollection, UPDATE_BANNER_DEFAULT_CONTENT, UPDATE_BANNER_I18N_NAMESPACE, UpdateBannerComponent, UserAvatarComponent, UsernameInputComponent, VALTECH_ADS_CONFIG, VALTECH_APP_CONFIG, VALTECH_APP_VERSION, VALTECH_AUTH_CONFIG, VALTECH_COMPANY_LINKS, VALTECH_DEBUG_CONSOLE, VALTECH_DEFAULT_CONTENT, VALTECH_DONATION_CONFIG, VALTECH_FEEDBACK_CONFIG, VALTECH_FIREBASE_CONFIG, VALTECH_FOOTER_I18N, VALTECH_FOOTER_LOGO, VALTECH_LANGUAGE_SELECTOR, VALTECH_LEGAL_CONFIG, VALTECH_NETWORK_ERROR_KEY, VALTECH_SOCIAL_LINKS, VERSION, ValtechErrorService, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, blogPost, buildFooterLinks, buildPath, collections, connectPageRefresh, createErrorStateProps, createFirebaseConfig, createGlowCardProps, createInitialPaginationState, createNumberFromToField, createRefreshableStream, createTitleProps, docs, errorLoggingInterceptor, extractPathParams, generatePatternTiles, generateRandomTile, getAppInfo, getAppVersion, getCollectionPath, getDocumentId, getTimeOfDayKey, goToTop, guestGuard, hasEmulators, interpretError, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isValidPath, joinPath, maxLength, mulberry32, news, parseMarkdownArticle, permissionGuard, permissionGuardFromRoute, provideLegalContent, provideValtechAds, provideValtechAppConfig, provideValtechAppVersion, provideValtechAuth, provideValtechAuthInterceptor, provideValtechDebugConsole, provideValtechDonations, provideValtechErrorHandling, provideValtechFeedback, provideValtechFirebase, provideValtechI18n, provideValtechLegal, provideValtechPresets, provideValtechSkeleton, query, renderPatternSvgInner, replaceSpecialChars, resolveColor, resolveInputDefaultValue, roleGuard, storagePaths, superAdminGuard, toArticle };
+export { ACTION_CARD_DEFAULTS, AD_SIZE_MAP, API_TABLE_COLUMN_LABELS, ARTICLE_SPACING, AVATAR_UPLOAD_DEFAULTS, AccordionComponent, ActionCardComponent, ActionHeaderComponent, ActionType, AdSlotComponent, AdsLoaderService, AdsService, AlertBoxComponent, AnalyticsErrorHandler, AnalyticsRouterTracker, AnalyticsService, AppConfigService, AppVersionService, ArticleBuilder, ArticleComponent, AttachmentUploaderComponent, AuthBackgroundComponent, AuthService, AuthStateService, AuthStorageService, AuthSyncService, AvatarComponent, AvatarUploadComponent, BOTTOM_NAV_DEFAULTS, BannerComponent, BaseDefault, BlogPostBuilder, BottomNavComponent, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CALLOUT_LABELS, CHEV_KEYS, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, ChangePasswordModalComponent, CheckInputComponent, CheckboxRadioInputComponent, ChipGroupComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContainerComponent, ContentLoaderComponent, ContentReactionComponent, ContentTransformer, CookieBannerComponent, CountdownComponent, CurrencyInputComponent, DEFAULT_ADS_CONFIG, DEFAULT_APP_CONFIG_SERVICE_CONFIG, DEFAULT_APP_VERSION_SERVICE_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_BACK_HEADER, DEFAULT_CANCEL_BUTTON, DEFAULT_CHECK_INTERVAL_MS, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, DEFAULT_DEBUG_CONSOLE_CONFIG, DEFAULT_DONATION_CONFIG, DEFAULT_EMPTY_STATE, DEFAULT_EMULATOR_CONFIG, DEFAULT_FEEDBACK_CONFIG, DEFAULT_FEEDBACK_TYPE_OPTIONS, DEFAULT_HOME_HEADER, DEFAULT_INFINITE_LIST_METADATA, DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLATFORMS, DEFAULT_REFRESHER_METADATA, DEFAULT_SKELETON_CONFIG, DataTableComponent, DateInputComponent, DateRangeInputComponent, DebugConsoleComponent, DetailSkeletonComponent, DeviceService, DisplayComponent, DividerComponent, DocsApiTableComponent, DocsBreadcrumbComponent, DocsBuilder, DocsCalloutComponent, DocsCodeExampleComponent, DocsLayoutComponent, DocsNavLinksComponent, DocsNavigationService, DocsPageComponent, DocsSearchComponent, DocsSectionComponent, DocsShellComponent, DocsSidebarComponent, DocsTocComponent, DonationService, DownloadService, EmailInputComponent, EmptyStateComponent, ExpandableTextComponent, FEATURES_LIST_DEFAULTS, FabComponent, FaqComponent, FeaturesListComponent, FeedbackFormComponent, FeedbackService, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FooterComponent, FooterLinksComponent, FormComponent, FormFooterComponent, FormSkeletonComponent, FunHeaderComponent, GlassComponent, GlowCardComponent, GlowComponent, GridSkeletonComponent, HANDOFF_ROUTE_PARAM, HANDOFF_TOKEN_PARAM, HandoffService, HeaderComponent, HintComponent, HorizontalScrollComponent, HourInputComponent, HrefComponent, I18nService, IMAGE_DEFAULTS, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, Icon, IconComponent, IconService, ImageComponent, ImageCropComponent, ImageService, InAppBrowserService, InfiniteListComponent, InfoComponent, InputI18nHelper, InputType, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LEGAL_CONTENT_CONFIG, LOGIN_DEFAULTS, LanguageSelectorComponent, LayeredCardComponent, LegalContentService, LegalLinkService, LinkComponent, LinkProcessorService, LinkedProvidersComponent, LinksAccordionComponent, LinksCakeComponent, ListSkeletonComponent, LoadingDirective, LocalStorageService, LocaleService, LoginComponent, MODAL_SIZES, MOTIF_KEYS, MOTION, MaintenancePageComponent, MarkdownArticleParserService, MenuComponent, MessagingService, MetaService, MfaModalComponent, ModalService, ModalShellComponent, MultiSelectSearchComponent, NavigationService, NewsBuilder, NoContentComponent, NotesBoxComponent, NotificationActionService, NotificationsService, NumberFromToComponent, NumberInputComponent, NumberStepperComponent, OAUTH_PROVIDERS_INFO, OAuthCallbackComponent, OAuthService, OrgSwitchService, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PATTERN_MOTIFS, PATTERN_PALETTES, PLATFORM_CONFIGS, PageContentComponent, PageLinksComponent, PageRefreshService, PageTemplateComponent, PageWrapperComponent, PaginationComponent, PaginationService, PasswordInputComponent, PatternComponent, PhoneInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PreferencesService, PresetService, PriceTagComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProcessLinksPipe, ProfileSkeletonComponent, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QueryBuilder, QuoteBoxComponent, RadioInputComponent, RangeInputComponent, RatingComponent, RefresherComponent, RightsFooterComponent, RotatingTextComponent, SHAPE_KEYS, SKELETON_LAYOUT_DEFAULT_ROWS, SKELETON_PRESETS, SOLID_KEYS, SearchSelectorComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SegmentControlComponent, SelectSearchComponent, SessionService, ShareButtonsComponent, SimpleComponent, SkeletonComponent, SkeletonLayoutComponent, SkeletonService, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, StatsCardComponent, StepperComponent, StorageService, SwipeCarouselComponent, TRI_KEYS, TabbedContentComponent, TableSkeletonComponent, TabsComponent, Terminal404Component, TestimonialCardComponent, TestimonialCarouselComponent, TextComponent, TextInputComponent, TextareaInputComponent, ThemeOption, ThemeService, TimelineComponent, TitleBlockComponent, TitleComponent, ToastService, ToggleInputComponent, TokenService, ToolbarActionType, ToolbarComponent, TranslatePipe, TypedCollection, UPDATE_BANNER_DEFAULT_CONTENT, UPDATE_BANNER_I18N_NAMESPACE, UpdateBannerComponent, UserAvatarComponent, UsernameInputComponent, VALTECH_ADS_CONFIG, VALTECH_APP_CONFIG, VALTECH_APP_VERSION, VALTECH_AUTH_CONFIG, VALTECH_COMPANY_LINKS, VALTECH_DEBUG_CONSOLE, VALTECH_DEFAULT_CONTENT, VALTECH_DONATION_CONFIG, VALTECH_FEEDBACK_CONFIG, VALTECH_FIREBASE_CONFIG, VALTECH_FOOTER_I18N, VALTECH_FOOTER_LOGO, VALTECH_LANGUAGE_SELECTOR, VALTECH_LEGAL_CONFIG, VALTECH_NETWORK_ERROR_KEY, VALTECH_SOCIAL_LINKS, VERSION, ValtechErrorService, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, blogPost, buildFooterLinks, buildPath, collections, connectPageRefresh, createErrorStateProps, createFirebaseConfig, createGlowCardProps, createInitialPaginationState, createNumberFromToField, createRefreshableStream, createTitleProps, docs, errorLoggingInterceptor, extractPathParams, generatePatternTiles, generateRandomTile, getAppInfo, getAppVersion, getCollectionPath, getDocumentId, getTimeOfDayKey, goToTop, guestGuard, hasEmulators, interpretError, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isValidPath, joinPath, maxLength, mulberry32, news, parseMarkdownArticle, permissionGuard, permissionGuardFromRoute, provideLegalContent, provideValtechAds, provideValtechAppConfig, provideValtechAppVersion, provideValtechAuth, provideValtechAuthInterceptor, provideValtechDebugConsole, provideValtechDonations, provideValtechErrorHandling, provideValtechFeedback, provideValtechFirebase, provideValtechI18n, provideValtechLegal, provideValtechPresets, provideValtechSkeleton, query, renderPatternSvgInner, replaceSpecialChars, resolveColor, resolveInputDefaultValue, roleGuard, storagePaths, superAdminGuard, toArticle };
 //# sourceMappingURL=valtech-components.mjs.map