valtech-components 4.0.988 → 4.0.989

package/fesm2022/valtech-components.mjs

@@ -70,7 +70,7 @@ import fixWebmDuration from 'fix-webm-duration';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.988';
+const VERSION = '4.0.989';
 
 function evaluateValtechAccess(rule, context, features = {}, visitedFeatures = new Set()) {
     if (rule == null)
@@ -37047,6 +37047,260 @@ const DEFAULT_FEEDBACK_TYPE_OPTIONS = [
  */
 // Configuration
 
+/**
+ * Default values for image processing
+ */
+const IMAGE_DEFAULTS = {
+    maxWidth: 800,
+    maxHeight: 800,
+    quality: 0.8,
+    mimeType: 'image/jpeg',
+    maxSize: 10 * 1024 * 1024, // 10MB
+    allowedTypes: ['image/jpeg', 'image/png', 'image/webp', 'image/gif'],
+    thumbnailSize: 150,
+};
+
+/**
+ * ImageService
+ *
+ * Service for image processing including compression, thumbnails, cropping and validation.
+ * Uses HTML Canvas for all operations - no external dependencies.
+ *
+ * @example
+ * ```typescript
+ * const imageService = inject(ImageService);
+ *
+ * // Compress an image
+ * const compressed = await imageService.compress(file, { maxWidth: 800, quality: 0.8 });
+ *
+ * // Generate thumbnail
+ * const thumb = await imageService.thumbnail(file, 150);
+ *
+ * // Validate before processing
+ * const validation = imageService.validate(file, { maxSize: 5 * 1024 * 1024 });
+ * if (!validation.valid) {
+ *   console.error(validation.message);
+ * }
+ * ```
+ */
+class ImageService {
+    /**
+     * Compress an image maintaining aspect ratio
+     * @param file - File or Blob to compress
+     * @param options - Compression options
+     * @returns Promise with processed image data
+     */
+    async compress(file, options) {
+        const opts = {
+            maxWidth: options?.maxWidth ?? IMAGE_DEFAULTS.maxWidth,
+            maxHeight: options?.maxHeight ?? IMAGE_DEFAULTS.maxHeight,
+            quality: options?.quality ?? IMAGE_DEFAULTS.quality,
+            mimeType: options?.mimeType ?? IMAGE_DEFAULTS.mimeType,
+        };
+        const img = await this.loadImage(file);
+        const { width, height } = this.calculateDimensions(img.width, img.height, opts.maxWidth, opts.maxHeight);
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(img, 0, 0, width, height);
+        const blob = await this.canvasToBlob(canvas, opts.mimeType, opts.quality);
+        const dataUrl = canvas.toDataURL(opts.mimeType, opts.quality);
+        return {
+            blob,
+            dataUrl,
+            width,
+            height,
+            size: blob.size,
+        };
+    }
+    /**
+     * Generate a square thumbnail from an image
+     * @param file - File or Blob to process
+     * @param size - Thumbnail size in pixels (default: 150)
+     * @returns Promise with processed thumbnail
+     */
+    async thumbnail(file, size) {
+        const thumbSize = size ?? IMAGE_DEFAULTS.thumbnailSize;
+        const img = await this.loadImage(file);
+        // Calculate square crop from center
+        const minDim = Math.min(img.width, img.height);
+        const cropX = (img.width - minDim) / 2;
+        const cropY = (img.height - minDim) / 2;
+        const canvas = document.createElement('canvas');
+        canvas.width = thumbSize;
+        canvas.height = thumbSize;
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(img, cropX, cropY, minDim, minDim, 0, 0, thumbSize, thumbSize);
+        const blob = await this.canvasToBlob(canvas, IMAGE_DEFAULTS.mimeType, 0.7 // Lower quality for thumbnails
+        );
+        const dataUrl = canvas.toDataURL(IMAGE_DEFAULTS.mimeType, 0.7);
+        return {
+            blob,
+            dataUrl,
+            width: thumbSize,
+            height: thumbSize,
+            size: blob.size,
+        };
+    }
+    /**
+     * Crop an image with specific coordinates
+     * @param file - File or Blob to crop
+     * @param cropData - Crop coordinates and dimensions
+     * @param options - Optional compression options for output
+     * @returns Promise with cropped image
+     */
+    async crop(file, cropData, options) {
+        const img = await this.loadImage(file);
+        const opts = {
+            quality: options?.quality ?? IMAGE_DEFAULTS.quality,
+            mimeType: options?.mimeType ?? IMAGE_DEFAULTS.mimeType,
+        };
+        const canvas = document.createElement('canvas');
+        canvas.width = cropData.width;
+        canvas.height = cropData.height;
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(img, cropData.x, cropData.y, cropData.width, cropData.height, 0, 0, cropData.width, cropData.height);
+        // Apply max dimensions if specified
+        if (options?.maxWidth || options?.maxHeight) {
+            return this.compress(await this.canvasToBlob(canvas, opts.mimeType, 1), options);
+        }
+        const blob = await this.canvasToBlob(canvas, opts.mimeType, opts.quality);
+        const dataUrl = canvas.toDataURL(opts.mimeType, opts.quality);
+        return {
+            blob,
+            dataUrl,
+            width: cropData.width,
+            height: cropData.height,
+            size: blob.size,
+        };
+    }
+    /**
+     * Validate an image file before processing
+     * @param file - File to validate
+     * @param options - Validation options
+     * @returns Validation result with error details if invalid
+     */
+    validate(file, options) {
+        const opts = {
+            maxSize: options?.maxSize ?? IMAGE_DEFAULTS.maxSize,
+            allowedTypes: options?.allowedTypes ?? IMAGE_DEFAULTS.allowedTypes,
+        };
+        // Check file type
+        if (!opts.allowedTypes.includes(file.type)) {
+            return {
+                valid: false,
+                error: 'invalidType',
+                message: `Formato no válido. Usa: ${opts.allowedTypes.map(t => t.split('/')[1].toUpperCase()).join(', ')}`,
+            };
+        }
+        // Check file size
+        if (file.size > opts.maxSize) {
+            const maxMB = Math.round(opts.maxSize / (1024 * 1024));
+            return {
+                valid: false,
+                error: 'fileTooLarge',
+                message: `La imagen es muy grande. Máximo ${maxMB}MB`,
+            };
+        }
+        return { valid: true };
+    }
+    /**
+     * Validate image dimensions (async - requires loading image)
+     * @param file - File to validate
+     * @param options - Validation options with minWidth/minHeight
+     * @returns Promise with validation result
+     */
+    async validateDimensions(file, options) {
+        const img = await this.loadImage(file);
+        if (options.minWidth && img.width < options.minWidth) {
+            return {
+                valid: false,
+                error: 'imageTooSmall',
+                message: `La imagen debe tener al menos ${options.minWidth}px de ancho`,
+            };
+        }
+        if (options.minHeight && img.height < options.minHeight) {
+            return {
+                valid: false,
+                error: 'imageTooSmall',
+                message: `La imagen debe tener al menos ${options.minHeight}px de alto`,
+            };
+        }
+        return { valid: true };
+    }
+    /**
+     * Convert a Blob/File to a data URL
+     */
+    async toDataUrl(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = reject;
+            reader.readAsDataURL(file);
+        });
+    }
+    /**
+     * Convert a data URL to a Blob
+     */
+    dataUrlToBlob(dataUrl) {
+        const arr = dataUrl.split(',');
+        const mime = arr[0].match(/:(.*?);/)[1];
+        const bstr = atob(arr[1]);
+        let n = bstr.length;
+        const u8arr = new Uint8Array(n);
+        while (n--) {
+            u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new Blob([u8arr], { type: mime });
+    }
+    // ============== Private Helpers ==============
+    loadImage(file) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => {
+                URL.revokeObjectURL(img.src);
+                resolve(img);
+            };
+            img.onerror = reject;
+            img.src = URL.createObjectURL(file);
+        });
+    }
+    calculateDimensions(originalWidth, originalHeight, maxWidth, maxHeight) {
+        let width = originalWidth;
+        let height = originalHeight;
+        // Scale down if necessary, maintaining aspect ratio
+        if (width > maxWidth) {
+            height = (height * maxWidth) / width;
+            width = maxWidth;
+        }
+        if (height > maxHeight) {
+            width = (width * maxHeight) / height;
+            height = maxHeight;
+        }
+        return {
+            width: Math.round(width),
+            height: Math.round(height),
+        };
+    }
+    canvasToBlob(canvas, mimeType, quality) {
+        return new Promise((resolve, reject) => {
+            canvas.toBlob((blob) => {
+                if (blob)
+                    resolve(blob);
+                else
+                    reject(new Error('Failed to create blob from canvas'));
+            }, mimeType, quality);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ImageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ImageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ImageService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class AttachmentUploaderComponent {
     get readyUrls() {
         return this.attachments()
@@ -37069,6 +37323,7 @@ class AttachmentUploaderComponent {
         this.attachmentsChange = output();
         this.i18n = inject(I18nService);
         this.feedbackService = inject(FeedbackService, { optional: true });
+        this.imageService = inject(ImageService);
         this.attachments = signal([]);
         this.showCameraOverlay = signal(false);
         this.cameraStream = null;
@@ -37170,6 +37425,35 @@ class AttachmentUploaderComponent {
             });
         });
     }
+    /**
+     * Genera y sube la miniatura de una imagen ya comprimida.
+     *
+     * Recibe el archivo COMPRIMIDO a propósito: `compressorjs` ya normalizó la
+     * orientación EXIF, y `ImageService` trabaja sobre canvas sin leer EXIF — si
+     * se le pasara el original, las fotos verticales de teléfono saldrían
+     * rotadas. Ver la nota en `generateThumbnail` (types.ts).
+     *
+     * Nunca es fatal: si falla, el adjunto queda subido sin miniatura y las
+     * listas caen al archivo grande. Perder la miniatura no justifica perder la
+     * foto que el usuario acaba de subir.
+     */
+    async uploadThumbnail(compressed) {
+        try {
+            const size = this.props().thumbnailSize ?? 320;
+            const thumb = await this.imageService.thumbnail(compressed, size);
+            const baseName = compressed.name.replace(/\.[^.]+$/, '');
+            const thumbFile = new File([thumb.blob], `${baseName}-thumb.jpg`, { type: 'image/jpeg' });
+            const thumbUploadFn = this.props().thumbnailUploadFn ??
+                this.props().uploadFn ??
+                this.feedbackService?.uploadAttachment.bind(this.feedbackService);
+            if (!thumbUploadFn)
+                return undefined;
+            return await thumbUploadFn(thumbFile);
+        }
+        catch {
+            return undefined;
+        }
+    }
     async uploadFile(id, file) {
         try {
             const shouldCompress = this.props().compressImages !== false && file.type.startsWith('image/');
@@ -37178,7 +37462,15 @@ class AttachmentUploaderComponent {
             if (!uploadFn)
                 throw new Error('No upload function configured');
             const url = await uploadFn(fileToUpload);
-            this.attachments.update(list => list.map(a => (a.id === id ? { ...a, status: 'ready', url } : a)));
+            // La miniatura SIEMPRE sale de un archivo pasado por compressorjs, que es
+            // lo que endereza la orientación EXIF. Si el consumer desactivó la
+            // compresión, se comprime igual solo para generar la miniatura — el
+            // archivo que se sube como principal sigue siendo el original.
+            const wantsThumb = this.props().generateThumbnail === true && file.type.startsWith('image/');
+            const thumbnailUrl = wantsThumb
+                ? await this.uploadThumbnail(shouldCompress ? fileToUpload : await this.compressImage(file))
+                : undefined;
+            this.attachments.update(list => list.map(a => (a.id === id ? { ...a, status: 'ready', url, thumbnailUrl } : a)));
         }
         catch {
             const error = this.i18n.t('attachUploadFailed');
@@ -38719,7 +39011,7 @@ const SURVEY_RESPONSE_I18N = {
     },
 };
 
-const NAMESPACE$3 = 'SurveyResponse';
+const NAMESPACE$4 = 'SurveyResponse';
 /** Code del backend cuando la invitación de esa persona ya se respondió. */
 const INVITE_USED_CODE = 'SURVEY_INVITE_ALREADY_USED';
 /** Tipos cuya respuesta es un booleano, no un texto. */
@@ -38798,8 +39090,8 @@ class SurveyResponseComponent {
             this.i18n.lang();
             return { variant: 'error', title: this.t('loginRequiredTitle'), description: this.t('loginRequiredBody') };
         });
-        if (!this.i18n.hasNamespace(NAMESPACE$3)) {
-            this.i18n.registerDefaults(NAMESPACE$3, SURVEY_RESPONSE_I18N);
+        if (!this.i18n.hasNamespace(NAMESPACE$4)) {
+            this.i18n.registerDefaults(NAMESPACE$4, SURVEY_RESPONSE_I18N);
         }
     }
     async ngOnInit() {
@@ -38989,12 +39281,12 @@ class SurveyResponseComponent {
             this.errors.handle(err, {
                 context: 'surveyResponse.submit',
                 fallbackKey: 'sendError',
-                i18nNamespace: NAMESPACE$3,
+                i18nNamespace: NAMESPACE$4,
             });
         }
     }
     t(key) {
-        return this.i18n.t(key, NAMESPACE$3);
+        return this.i18n.t(key, NAMESPACE$4);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SurveyResponseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SurveyResponseComponent, isStandalone: true, selector: "val-survey-response", inputs: { props: "props" }, outputs: { submitted: "submitted" }, ngImport: i0, template: `
@@ -39603,7 +39895,7 @@ const FIELD_SCHEMA_EDITOR_I18N = {
     },
 };
 
-const NAMESPACE$2 = 'FieldSchemaEditor';
+const NAMESPACE$3 = 'FieldSchemaEditor';
 /**
  * Tipos cuyo valor sale de una lista cerrada que define quien arma el
  * formulario — sin al menos una opción, el campo no se puede responder.
@@ -39688,8 +39980,8 @@ class FieldSchemaEditorComponent {
                 options: this.options(),
             };
         });
-        if (!this.i18n.hasNamespace(NAMESPACE$2)) {
-            this.i18n.registerDefaults(NAMESPACE$2, FIELD_SCHEMA_EDITOR_I18N);
+        if (!this.i18n.hasNamespace(NAMESPACE$3)) {
+            this.i18n.registerDefaults(NAMESPACE$3, FIELD_SCHEMA_EDITOR_I18N);
         }
         this.typeControl.valueChanges.subscribe(value => {
             this.currentType.set(value || 'TEXT');
@@ -39726,7 +40018,7 @@ class FieldSchemaEditorComponent {
     }
     t(key) {
         this.i18n.lang();
-        return this.i18n.t(key, NAMESPACE$2);
+        return this.i18n.t(key, NAMESPACE$3);
     }
     state() {
         return this.props.state ?? ComponentStates.ENABLED;
@@ -39953,6 +40245,379 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
+const REQUEST_REVIEW_PANEL_I18N = {
+    es: {
+        approve: 'Aprobar',
+        reject: 'Rechazar',
+        cancel: 'Cancelar',
+        confirmReject: 'Confirmar rechazo',
+        rejectReason: 'Motivo del rechazo',
+        rejectReasonPlaceholder: 'Cuéntale qué le faltó o qué debe corregir',
+        rejectReasonHint: 'Esto le llega a quien envió la solicitud.',
+    },
+    en: {
+        approve: 'Approve',
+        reject: 'Reject',
+        cancel: 'Cancel',
+        confirmReject: 'Confirm rejection',
+        rejectReason: 'Reason for rejection',
+        rejectReasonPlaceholder: 'Tell them what was missing or needs fixing',
+        rejectReasonHint: 'This is sent to whoever submitted the request.',
+    },
+};
+
+const NAMESPACE$2 = 'RequestReviewPanel';
+/**
+ * val-request-review-panel — cola de revisión del factory (ADR-062).
+ *
+ * Es **presentacional**: no carga datos, no conoce el backend ni el dominio. El
+ * consumer le pasa la cola ya normalizada y escucha `(decision)`.
+ *
+ * ## Por qué el cuerpo va proyectado y no configurado
+ *
+ * El ADR original proponía describir el cuerpo con arrays de nombres de campo
+ * (`fields.display: ['taxId', 'tagsRequested']`). Al implementarlo con los dos
+ * consumidores reales delante quedó claro que eso reinventa un motor de
+ * templating peor que Angular: Chesed necesita una lista de documentos con
+ * iconos y `target="_blank"`, Okhelia un enlace a la receta y un input de
+ * comentario. Ninguna lista de strings expresa eso sin agregarle un flag al
+ * componente por cada caso nuevo.
+ *
+ * Entonces el panel es dueño de lo que **de verdad** se repite — la cáscara, el
+ * chrome de la card, y la mecánica de decisión — y el cuerpo de cada ítem lo
+ * escribe cada vertical en un `ng-template` con su propio HTML.
+ *
+ * ```html
+ * <val-request-review-panel [props]="panelProps()" [itemBody]="body"
+ *                           (decision)="onDecision($event)" />
+ *
+ * <ng-template #body let-item>
+ *   <a [routerLink]="['/app/recetas', recipeIdOf(item)]">Ver receta</a>
+ * </ng-template>
+ * ```
+ *
+ * ## Rechazo con motivo
+ *
+ * El flujo de dos pasos (Rechazar → escribir motivo → Confirmar) es del panel,
+ * no del consumer, y está activo por defecto. Rechazar de un click deja al
+ * solicitante sin saber qué corregir; era el único de los dos paneles que lo
+ * tenía bien resuelto y ahora lo heredan los dos.
+ */
+class RequestReviewPanelComponent {
+    constructor() {
+        this.i18n = inject(I18nService);
+        this.props = input.required();
+        this.decision = new EventEmitter();
+        /** ID del ítem cuyo formulario de rechazo está abierto. */
+        this._rejectingId = signal('');
+        this.rejectingId = this._rejectingId.asReadonly();
+        this._reason = signal('');
+        this.reason = this._reason.asReadonly();
+        this.cfg = computed(() => this.props());
+        this.skeletonRows = computed(() => Array.from({ length: this.cfg().skeletonRows ?? 3 }, (_, i) => i));
+        /** Hay una decisión en vuelo: toda la cola se congela. */
+        this.isBusy = computed(() => !!this.cfg().busyItemId);
+        if (!this.i18n.hasNamespace(NAMESPACE$2)) {
+            this.i18n.registerContent(NAMESPACE$2, REQUEST_REVIEW_PANEL_I18N);
+        }
+    }
+    t(key) {
+        return this.i18n.t(key, NAMESPACE$2);
+    }
+    /** El ítem en vuelo muestra WORKING; los demás quedan deshabilitados. */
+    stateFor(item) {
+        const busyId = this.cfg().busyItemId;
+        if (busyId === item.id)
+            return 'WORKING';
+        return busyId ? 'DISABLED' : 'ENABLED';
+    }
+    approveState(item) {
+        return this.stateFor(item);
+    }
+    /**
+     * Confirmar el rechazo exige motivo cuando `requireRejectReason` está activo
+     * (el default). Es el freno que evita la notificación de rechazo vacía.
+     */
+    confirmRejectState(item) {
+        const state = this.stateFor(item);
+        if (state !== 'ENABLED')
+            return state;
+        const needsReason = this.cfg().requireRejectReason !== false;
+        return needsReason && this._reason().trim().length === 0 ? 'DISABLED' : 'ENABLED';
+    }
+    onReasonInput(event) {
+        this._reason.set(event.target.value);
+    }
+    startReject(item) {
+        // Sin motivo obligatorio el rechazo es directo: abrir un formulario que no
+        // exige nada solo agrega un paso.
+        if (this.cfg().requireRejectReason === false) {
+            this.decision.emit({ itemId: item.id, approved: false });
+            return;
+        }
+        this._reason.set('');
+        this._rejectingId.set(item.id);
+    }
+    cancelReject() {
+        this._rejectingId.set('');
+        this._reason.set('');
+    }
+    confirmReject(item) {
+        const reason = this._reason().trim();
+        if (this.cfg().requireRejectReason !== false && reason.length === 0)
+            return;
+        this.decision.emit({ itemId: item.id, approved: false, reason: reason || undefined });
+        this.cancelReject();
+    }
+    approve(item) {
+        this.decision.emit({ itemId: item.id, approved: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestReviewPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestReviewPanelComponent, isStandalone: true, selector: "val-request-review-panel", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: true, transformFunction: null }, itemBody: { classPropertyName: "itemBody", publicName: "itemBody", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { decision: "decision" }, ngImport: i0, template: `
+    <div class="rrp">
+      @if (cfg().loading) {
+        <div class="rrp__skel" aria-hidden="true">
+          @for (row of skeletonRows(); track row) {
+            <val-skeleton [props]="{ width: '100%', height: '120px', borderRadius: '14px' }" />
+          }
+        </div>
+      } @else if (cfg().errorState) {
+        <val-empty-state [props]="cfg().errorState!" />
+      } @else if (cfg().items.length === 0) {
+        @if (cfg().emptyState; as empty) {
+          <val-empty-state [props]="empty" />
+        }
+      } @else {
+        @if (cfg().countLabel; as count) {
+          <p class="rrp__count">{{ count }}</p>
+        }
+
+        <ul class="rrp__queue">
+          @for (item of cfg().items; track item.id) {
+            <li class="rrp__item">
+              <h3 class="rrp__title">{{ item.title }}</h3>
+
+              @for (line of item.meta ?? []; track line) {
+                <p class="rrp__meta">{{ line }}</p>
+              }
+
+              @if (itemBody) {
+                <div class="rrp__body">
+                  <ng-container
+                    [ngTemplateOutlet]="itemBody"
+                    [ngTemplateOutletContext]="{ $implicit: item, item: item }"
+                  />
+                </div>
+              }
+
+              @if (rejectingId() === item.id) {
+                <div class="rrp__reject">
+                  <label class="rrp__reject-label" [attr.for]="'rrp-note-' + item.id">
+                    {{ cfg().rejectReasonLabel ?? t('rejectReason') }}
+                  </label>
+                  <textarea
+                    class="rrp__reject-input"
+                    [id]="'rrp-note-' + item.id"
+                    rows="3"
+                    [placeholder]="cfg().rejectReasonPlaceholder ?? t('rejectReasonPlaceholder')"
+                    [value]="reason()"
+                    (input)="onReasonInput($event)"
+                  ></textarea>
+                  <p class="rrp__reject-hint">
+                    {{ cfg().rejectReasonHint ?? t('rejectReasonHint') }}
+                  </p>
+
+                  <div class="rrp__actions">
+                    <val-button
+                      [props]="{
+                        token: 'rrp-cancel-' + item.id,
+                        text: cfg().cancelLabel ?? t('cancel'),
+                        color: 'dark',
+                        fill: 'clear',
+                        size: 'small',
+                        type: 'button',
+                        state: isBusy() ? 'DISABLED' : 'ENABLED',
+                      }"
+                      (onClick)="cancelReject()"
+                    />
+                    <val-button
+                      [props]="{
+                        token: 'rrp-confirm-reject-' + item.id,
+                        text: cfg().confirmRejectLabel ?? t('confirmReject'),
+                        color: 'danger',
+                        fill: 'solid',
+                        shape: 'round',
+                        size: 'small',
+                        type: 'button',
+                        state: confirmRejectState(item),
+                      }"
+                      (onClick)="confirmReject(item)"
+                    />
+                  </div>
+                </div>
+              } @else {
+                <div class="rrp__actions">
+                  <val-button
+                    [props]="{
+                      token: 'rrp-reject-' + item.id,
+                      text: cfg().rejectLabel ?? t('reject'),
+                      color: 'dark',
+                      fill: 'outline',
+                      shape: 'round',
+                      size: 'small',
+                      type: 'button',
+                      state: isBusy() ? 'DISABLED' : 'ENABLED',
+                    }"
+                    (onClick)="startReject(item)"
+                  />
+                  <val-button
+                    [props]="{
+                      token: 'rrp-approve-' + item.id,
+                      text: cfg().approveLabel ?? t('approve'),
+                      color: 'primary',
+                      fill: 'solid',
+                      shape: 'round',
+                      size: 'small',
+                      type: 'button',
+                      state: approveState(item),
+                    }"
+                    (onClick)="approve(item)"
+                  />
+                </div>
+              }
+            </li>
+          }
+        </ul>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.rrp{display:flex;flex-direction:column;gap:12px}.rrp__skel{display:flex;flex-direction:column;gap:10px}.rrp__count{margin:0;font-size:.8125rem;font-weight:700;color:var(--ion-color-medium, #92949c);font-variant-numeric:tabular-nums}.rrp__queue{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.rrp__item{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:14px;background:var(--ion-card-background, var(--ion-background-color, #fff));border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1))}.rrp__title{margin:0;font-size:1rem;font-weight:700;color:var(--ion-text-color, #000)}.rrp__meta{margin:0;font-size:.8125rem;color:var(--ion-color-medium, #92949c)}.rrp__body{display:flex;flex-direction:column;gap:8px}.rrp__reject{display:flex;flex-direction:column;gap:6px}.rrp__reject-label{font-size:.8125rem;font-weight:600;color:var(--ion-text-color, #000)}.rrp__reject-input{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:10px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-background-color, #fff);color:var(--ion-text-color, #000);font-family:inherit;font-size:.875rem;resize:vertical}.rrp__reject-input:focus{outline:none;border-color:var(--ion-color-primary)}.rrp__reject-hint{margin:0;font-size:.75rem;color:var(--ion-color-medium, #92949c)}.rrp__actions{display:flex;flex-direction:column;gap:8px;margin-top:4px}@media (min-width: 576px){.rrp__actions{flex-direction:row;justify-content:flex-end;align-items:center;flex-wrap:wrap}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: EmptyStateComponent, selector: "val-empty-state", inputs: ["props"] }, { kind: "component", type: SkeletonComponent, selector: "val-skeleton", inputs: ["props"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestReviewPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-request-review-panel', standalone: true, imports: [CommonModule, ButtonComponent, EmptyStateComponent, SkeletonComponent], template: `
+    <div class="rrp">
+      @if (cfg().loading) {
+        <div class="rrp__skel" aria-hidden="true">
+          @for (row of skeletonRows(); track row) {
+            <val-skeleton [props]="{ width: '100%', height: '120px', borderRadius: '14px' }" />
+          }
+        </div>
+      } @else if (cfg().errorState) {
+        <val-empty-state [props]="cfg().errorState!" />
+      } @else if (cfg().items.length === 0) {
+        @if (cfg().emptyState; as empty) {
+          <val-empty-state [props]="empty" />
+        }
+      } @else {
+        @if (cfg().countLabel; as count) {
+          <p class="rrp__count">{{ count }}</p>
+        }
+
+        <ul class="rrp__queue">
+          @for (item of cfg().items; track item.id) {
+            <li class="rrp__item">
+              <h3 class="rrp__title">{{ item.title }}</h3>
+
+              @for (line of item.meta ?? []; track line) {
+                <p class="rrp__meta">{{ line }}</p>
+              }
+
+              @if (itemBody) {
+                <div class="rrp__body">
+                  <ng-container
+                    [ngTemplateOutlet]="itemBody"
+                    [ngTemplateOutletContext]="{ $implicit: item, item: item }"
+                  />
+                </div>
+              }
+
+              @if (rejectingId() === item.id) {
+                <div class="rrp__reject">
+                  <label class="rrp__reject-label" [attr.for]="'rrp-note-' + item.id">
+                    {{ cfg().rejectReasonLabel ?? t('rejectReason') }}
+                  </label>
+                  <textarea
+                    class="rrp__reject-input"
+                    [id]="'rrp-note-' + item.id"
+                    rows="3"
+                    [placeholder]="cfg().rejectReasonPlaceholder ?? t('rejectReasonPlaceholder')"
+                    [value]="reason()"
+                    (input)="onReasonInput($event)"
+                  ></textarea>
+                  <p class="rrp__reject-hint">
+                    {{ cfg().rejectReasonHint ?? t('rejectReasonHint') }}
+                  </p>
+
+                  <div class="rrp__actions">
+                    <val-button
+                      [props]="{
+                        token: 'rrp-cancel-' + item.id,
+                        text: cfg().cancelLabel ?? t('cancel'),
+                        color: 'dark',
+                        fill: 'clear',
+                        size: 'small',
+                        type: 'button',
+                        state: isBusy() ? 'DISABLED' : 'ENABLED',
+                      }"
+                      (onClick)="cancelReject()"
+                    />
+                    <val-button
+                      [props]="{
+                        token: 'rrp-confirm-reject-' + item.id,
+                        text: cfg().confirmRejectLabel ?? t('confirmReject'),
+                        color: 'danger',
+                        fill: 'solid',
+                        shape: 'round',
+                        size: 'small',
+                        type: 'button',
+                        state: confirmRejectState(item),
+                      }"
+                      (onClick)="confirmReject(item)"
+                    />
+                  </div>
+                </div>
+              } @else {
+                <div class="rrp__actions">
+                  <val-button
+                    [props]="{
+                      token: 'rrp-reject-' + item.id,
+                      text: cfg().rejectLabel ?? t('reject'),
+                      color: 'dark',
+                      fill: 'outline',
+                      shape: 'round',
+                      size: 'small',
+                      type: 'button',
+                      state: isBusy() ? 'DISABLED' : 'ENABLED',
+                    }"
+                    (onClick)="startReject(item)"
+                  />
+                  <val-button
+                    [props]="{
+                      token: 'rrp-approve-' + item.id,
+                      text: cfg().approveLabel ?? t('approve'),
+                      color: 'primary',
+                      fill: 'solid',
+                      shape: 'round',
+                      size: 'small',
+                      type: 'button',
+                      state: approveState(item),
+                    }"
+                    (onClick)="approve(item)"
+                  />
+                </div>
+              }
+            </li>
+          }
+        </ul>
+      }
+    </div>
+  `, styles: [":host{display:block}.rrp{display:flex;flex-direction:column;gap:12px}.rrp__skel{display:flex;flex-direction:column;gap:10px}.rrp__count{margin:0;font-size:.8125rem;font-weight:700;color:var(--ion-color-medium, #92949c);font-variant-numeric:tabular-nums}.rrp__queue{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.rrp__item{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:14px;background:var(--ion-card-background, var(--ion-background-color, #fff));border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1))}.rrp__title{margin:0;font-size:1rem;font-weight:700;color:var(--ion-text-color, #000)}.rrp__meta{margin:0;font-size:.8125rem;color:var(--ion-color-medium, #92949c)}.rrp__body{display:flex;flex-direction:column;gap:8px}.rrp__reject{display:flex;flex-direction:column;gap:6px}.rrp__reject-label{font-size:.8125rem;font-weight:600;color:var(--ion-text-color, #000)}.rrp__reject-input{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:10px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-background-color, #fff);color:var(--ion-text-color, #000);font-family:inherit;font-size:.875rem;resize:vertical}.rrp__reject-input:focus{outline:none;border-color:var(--ion-color-primary)}.rrp__reject-hint{margin:0;font-size:.75rem;color:var(--ion-color-medium, #92949c)}.rrp__actions{display:flex;flex-direction:column;gap:8px;margin-top:4px}@media (min-width: 576px){.rrp__actions{flex-direction:row;justify-content:flex-end;align-items:center;flex-wrap:wrap}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { itemBody: [{
+                type: Input
+            }], decision: [{
+                type: Output
+            }] } });
+
 class RequestFormBuilderService extends FormSchemaBuilderService {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestFormBuilderService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestFormBuilderService, providedIn: 'root' }); }
@@ -44999,521 +45664,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
-const STATUS_STYLE = {
-    approved: { bg: '#22c55e', color: '#fff' },
-    rejected: { bg: '#ef4444', color: '#fff' },
-    in_review: { bg: '#fef3c7', color: '#92400e' },
-    pending: { bg: 'var(--ion-color-light, #f4f5f8)', color: 'var(--ion-color-dark, #222)' },
-    cancelled: { bg: 'var(--ion-color-light, #f4f5f8)', color: 'var(--ion-color-medium, #636469)' },
-    closed: { bg: 'var(--ion-color-light, #f4f5f8)', color: 'var(--ion-color-medium, #636469)' },
-};
-/**
- * Panel de revisión de una Request genérica (ADR-061/062): status + acciones
- * approve/reject + fields del formulario + comentarios. Config-driven, sin
- * conocimiento del dominio (adoption, recipe_verification, etc.) — cada
- * consumer inyecta su `RequestReviewPanelConfig`.
- */
-class RequestReviewPanelComponent {
-    constructor() {
-        this.requests = inject(RequestService);
-        this.i18n = inject(I18nService);
-        this.errors = inject(ValtechErrorService);
-        this.toast = inject(ToastService);
-        this.destroyRef = inject(DestroyRef);
-        this.requestId = input.required();
-        this.config = input.required();
-        this.loaded = output();
-        this._req = signal(null);
-        this._loading = signal(true);
-        this._loadError = signal(null);
-        this._comments = signal([]);
-        this._loadingComments = signal(false);
-        this._transitioning = signal(false);
-        this.req = this._req.asReadonly();
-        this.loading = this._loading.asReadonly();
-        this.loadError = this._loadError.asReadonly();
-        this.comments = this._comments.asReadonly();
-        this.loadingComments = this._loadingComments.asReadonly();
-        this.transitioning = this._transitioning.asReadonly();
-        this.heroImgFailed = signal(false);
-        this.heroConfig = computed(() => this.config().entityHero);
-        this.statusStyle = computed(() => STATUS_STYLE[this._req()?.status ?? ''] ?? STATUS_STYLE['pending']);
-        this.heroName = computed(() => {
-            const hero = this.heroConfig();
-            if (!hero)
-                return undefined;
-            return this._req()?.metadata?.[hero.nameField];
-        });
-        this.heroImage = computed(() => {
-            const hero = this.heroConfig();
-            if (!hero?.imageField)
-                return undefined;
-            return this._req()?.metadata?.[hero.imageField];
-        });
-        this.canNavigateHero = computed(() => {
-            const hero = this.heroConfig();
-            const metadata = this._req()?.metadata;
-            if (!hero || !metadata)
-                return false;
-            return hero.canNavigate(metadata);
-        });
-        this.submitterInitial = computed(() => {
-            const s = this._req()?.submitter;
-            if (!s)
-                return '?';
-            return ((s.name || s.email) ?? '?').charAt(0).toUpperCase();
-        });
-        this.fieldEntries = computed(() => {
-            const fields = this._req()?.fields ?? {};
-            return Object.entries(fields)
-                .filter(([, v]) => v != null && v !== '')
-                .map(([k, v]) => ({ key: k, value: String(v) }));
-        });
-        this.errorState = computed(() => {
-            this.i18n.lang();
-            const err = this._loadError();
-            const msg = (err instanceof Error ? err.message : String(err ?? '')).toLowerCase();
-            const isOffline = msg.includes('network') || msg.includes('offline');
-            return {
-                variant: 'error',
-                title: isOffline ? this.t('offlineTitle') : this.t('errorTitle'),
-                description: isOffline ? this.t('offlineHint') : '',
-                cta: { label: this.t('retry'), handler: () => void this.load() },
-            };
-        });
-    }
-    ngOnInit() {
-        void this.load();
-    }
-    async load() {
-        const id = this.requestId();
-        this._loading.set(true);
-        this._loadError.set(null);
-        try {
-            const req = await firstValueFrom(this.requests.getRequest(id));
-            this._req.set(req);
-            this.loaded.emit(req);
-            this.subscribeComments(req.appId, req.orgId, id);
-        }
-        catch (err) {
-            this._loadError.set(err);
-            this.errors.handle(err, {
-                context: 'request-review-panel.load',
-                fallbackKey: 'errorTitle',
-                i18nNamespace: this.config().i18nNamespace,
-            });
-        }
-        finally {
-            this._loading.set(false);
-        }
-    }
-    subscribeComments(appId, orgId, requestId) {
-        this._loadingComments.set(true);
-        this.requests
-            .watchComments(appId, orgId, requestId)
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe({
-            next: comments => {
-                this._comments.set(comments);
-                this._loadingComments.set(false);
-            },
-            error: () => {
-                // comentarios son best-effort; si el listener falla, silenciar y ocultar spinner
-                this._loadingComments.set(false);
-            },
-        });
-    }
-    async transition(status) {
-        const req = this._req();
-        if (!req || this._transitioning())
-            return;
-        this._transitioning.set(true);
-        try {
-            await firstValueFrom(this.requests.transition(req.id, { status }));
-            await this.load();
-            this.toast.show({ message: this.t('statusUpdated'), duration: 2500, color: 'dark', position: 'top' });
-        }
-        catch (err) {
-            this.errors.handle(err, {
-                context: 'request-review-panel.transition',
-                fallbackKey: 'statusError',
-                i18nNamespace: this.config().i18nNamespace,
-            });
-        }
-        finally {
-            this._transitioning.set(false);
-        }
-    }
-    onHeroClick() {
-        const hero = this.heroConfig();
-        const metadata = this._req()?.metadata;
-        if (hero && metadata)
-            hero.navigate(metadata);
-    }
-    formatDate(iso) {
-        if (!iso)
-            return '';
-        try {
-            return new Date(iso).toLocaleDateString(this.i18n.lang() === 'es' ? 'es-CL' : 'en-US', {
-                day: 'numeric',
-                month: 'short',
-                year: 'numeric',
-            });
-        }
-        catch {
-            return iso;
-        }
-    }
-    authorInitial(c) {
-        return ((c.author.name || c.author.email) ?? '?').charAt(0).toUpperCase();
-    }
-    relativeTime(iso) {
-        if (!iso)
-            return '';
-        const diffMs = Date.now() - new Date(iso).getTime();
-        if (Number.isNaN(diffMs))
-            return iso;
-        const lang = this.i18n.lang();
-        const mins = Math.floor(diffMs / 60000);
-        if (mins < 1)
-            return lang === 'es' ? 'hace un momento' : 'just now';
-        if (mins < 60)
-            return lang === 'es' ? `hace ${mins} min` : `${mins}m ago`;
-        const hours = Math.floor(mins / 60);
-        if (hours < 24)
-            return lang === 'es' ? `hace ${hours} h` : `${hours}h ago`;
-        const days = Math.floor(hours / 24);
-        if (days < 7)
-            return lang === 'es' ? `hace ${days} dia${days > 1 ? 's' : ''}` : `${days}d ago`;
-        return this.formatDate(iso);
-    }
-    t(key) {
-        return this.i18n.t(key, this.config().i18nNamespace);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestReviewPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestReviewPanelComponent, isStandalone: true, selector: "val-request-review-panel", inputs: { requestId: { classPropertyName: "requestId", publicName: "requestId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { loaded: "loaded" }, ngImport: i0, template: `
-    <div class="page">
-      @if (loading()) {
-        <div class="skel" aria-hidden="true">
-          <val-skeleton [props]="{ width: '100%', height: '88px', borderRadius: '14px' }" />
-          <val-skeleton [props]="{ width: '100%', height: '64px', borderRadius: '12px' }" />
-          <val-skeleton [props]="{ width: '100%', height: '80px', borderRadius: '12px' }" />
-          <val-skeleton [props]="{ width: '100%', height: '120px', borderRadius: '12px' }" />
-        </div>
-      } @else if (loadError()) {
-        <val-empty-state [props]="errorState()" />
-      } @else if (req()) {
-        <div class="detail">
-          @if (heroConfig() && heroName()) {
-            <button class="entity-hero" (click)="onHeroClick()" [disabled]="!canNavigateHero()">
-              <div class="entity-hero__media">
-                @if (heroImage() && !heroImgFailed()) {
-                  <img
-                    [src]="heroImage()"
-                    [alt]="heroName()!"
-                    loading="lazy"
-                    (error)="heroImgFailed.set(true)"
-                    class="entity-hero__img"
-                  />
-                } @else {
-                  <span class="entity-hero__placeholder" aria-hidden="true">{{
-                    heroConfig()!.placeholderIcon || '📄'
-                  }}</span>
-                }
-              </div>
-              <div class="entity-hero__body">
-                <span class="entity-hero__label">{{ t(heroConfig()!.labelKey) }}</span>
-                <span class="entity-hero__name">{{ heroName() }}</span>
-              </div>
-              @if (canNavigateHero()) {
-                <span class="entity-hero__chevron" aria-hidden="true">›</span>
-              }
-            </button>
-          }
-
-          <div class="status-card" [style.border-left-color]="statusStyle().bg">
-            <div class="status-card__top">
-              <span class="status-badge" [style.background]="statusStyle().bg" [style.color]="statusStyle().color">
-                {{ t('status_' + req()!.status) }}
-              </span>
-              <span class="submitted-at">{{ t('submittedAt') }}: {{ formatDate(req()!.createdAt) }}</span>
-            </div>
-
-            @if (config().canReview() && (req()!.status === 'pending' || req()!.status === 'in_review')) {
-              <div class="actions-row">
-                <val-button
-                  [props]="{
-                    token: 'approve',
-                    text: t('approve'),
-                    color: 'primary',
-                    fill: 'solid',
-                    shape: 'round',
-                    size: 'small',
-                    type: 'button',
-                    state: transitioning() ? 'WORKING' : 'ENABLED',
-                    handler: transition.bind(this, 'approved'),
-                  }"
-                />
-                <val-button
-                  [props]="{
-                    token: 'reject',
-                    text: t('reject'),
-                    color: 'medium',
-                    fill: 'outline',
-                    shape: 'round',
-                    size: 'small',
-                    type: 'button',
-                    state: transitioning() ? 'WORKING' : 'ENABLED',
-                    handler: transition.bind(this, 'rejected'),
-                  }"
-                />
-              </div>
-            }
-          </div>
-
-          @if (req()!.submitter) {
-            <div class="section">
-              <p class="section__title">{{ t('submitter') }}</p>
-              <div class="submitter-row">
-                <div class="submitter-avatar" aria-hidden="true">{{ submitterInitial() }}</div>
-                <div class="submitter-info">
-                  @if (req()!.submitter!.name) {
-                    <span class="submitter-name">{{ req()!.submitter!.name }}</span>
-                  }
-                  @if (req()!.submitter!.email) {
-                    <span class="submitter-email">{{ req()!.submitter!.email }}</span>
-                  }
-                  @if (req()!.submitter!.phone) {
-                    <span class="submitter-email">{{ req()!.submitter!.phone }}</span>
-                  }
-                </div>
-              </div>
-            </div>
-          }
-
-          @if (fieldEntries().length) {
-            <div class="section">
-              <p class="section__title">{{ t('fields') }}</p>
-              @for (entry of fieldEntries(); track entry.key) {
-                <div class="field-row">
-                  <span class="field-row__label">{{ entry.key }}</span>
-                  <span class="field-row__value">{{ entry.value }}</span>
-                </div>
-              }
-            </div>
-          }
-
-          @if (
-            !config().canReview() && req()!.status === 'approved' && canNavigateHero() && config().viewEntityCtaLabelKey
-          ) {
-            <val-button
-              [props]="{
-                token: 'view-entity',
-                text: t(config().viewEntityCtaLabelKey!),
-                color: 'primary',
-                fill: 'solid',
-                shape: 'round',
-                size: 'default',
-                type: 'button',
-                state: 'ENABLED',
-                handler: onHeroClick.bind(this),
-              }"
-            />
-          }
-
-          <div class="section">
-            <p class="section__title">{{ t('commentsTitle') }}</p>
-            @if (loadingComments()) {
-              <div class="section-pad">
-                <val-skeleton [props]="{ width: '100%', height: '48px', borderRadius: '8px' }" />
-              </div>
-            } @else if (comments().length === 0) {
-              <p class="no-comments">{{ t('noComments') }}</p>
-            } @else {
-              <ul class="comments">
-                @for (c of comments(); track c.commentId) {
-                  <li class="comment">
-                    <div class="comment__avatar" aria-hidden="true">{{ authorInitial(c) }}</div>
-                    <div class="comment__content">
-                      <div class="comment__header">
-                        <span class="comment__author">{{ c.author.name || c.author.email }}</span>
-                        <span class="comment__date">{{ relativeTime(c.createdAt) }}</span>
-                      </div>
-                      <p class="comment__body">{{ c.body }}</p>
-                    </div>
-                  </li>
-                }
-              </ul>
-            }
-          </div>
-        </div>
-      }
-    </div>
-  `, isInline: true, styles: [".page{display:flex;flex-direction:column;gap:14px}.skel{display:flex;flex-direction:column;gap:12px}.skel val-skeleton{display:block}.detail{display:flex;flex-direction:column;gap:14px}.entity-hero{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--ion-card-background, var(--ion-background-color, #fff));border-radius:14px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));width:100%;text-align:left;cursor:pointer}.entity-hero:disabled{cursor:default}.entity-hero__media{width:56px;height:56px;border-radius:12px;overflow:hidden;flex-shrink:0;background:var(--ion-color-light, #f4f5f8);display:flex;align-items:center;justify-content:center}.entity-hero__img{width:100%;height:100%;object-fit:cover}.entity-hero__placeholder{font-size:1.625rem}.entity-hero__body{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.entity-hero__label{font-size:.75rem;color:var(--ion-color-dark, #636469)}.entity-hero__name{font-size:1rem;font-weight:600;color:var(--ion-text-color, #000);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.entity-hero__chevron{font-size:1.5rem;color:var(--ion-color-dark, #92949c);line-height:1}.status-card{background:var(--ion-card-background, var(--ion-background-color, #fff));border-radius:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));border-left:4px solid;padding:14px 16px;display:flex;flex-direction:column;gap:12px}.status-card__top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.status-badge{display:inline-block;padding:4px 12px;border-radius:100px;font-size:.8125rem;font-weight:700}.submitted-at{font-size:.8125rem;color:var(--ion-color-dark-shade, #1e2023)}.actions-row{display:flex;gap:10px;flex-wrap:wrap}.section{background:var(--ion-card-background, var(--ion-background-color, #fff));border-radius:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));overflow:hidden}.section__title{margin:0;font-size:.8125rem;font-weight:600;color:var(--ion-color-dark-shade, #1e2023);padding:12px 16px 0}.section-pad{padding:12px 16px}.submitter-row{display:flex;align-items:center;gap:12px;padding:12px 16px}.submitter-avatar{width:40px;height:40px;border-radius:50%;background:var(--ion-color-primary, #313131);color:var(--ion-color-primary-contrast, #fff);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;flex-shrink:0}.submitter-info{display:flex;flex-direction:column;gap:2px;min-width:0}.submitter-name{font-size:.9375rem;font-weight:600;color:var(--ion-text-color, #000)}.submitter-email{font-size:.8125rem;color:var(--ion-color-dark, #636469);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.field-row{display:flex;flex-direction:column;gap:3px;padding:11px 16px;border-bottom:1px solid var(--ion-border-color, rgba(0, 0, 0, .06))}.field-row:last-child{border-bottom:none}.field-row__label{font-size:.75rem;color:var(--ion-color-dark, #636469);text-transform:capitalize}.field-row__value{font-size:.9375rem;color:var(--ion-text-color, #000);font-weight:500;word-break:break-word;white-space:pre-line}.no-comments{margin:0;padding:12px 16px;font-size:.875rem;color:var(--ion-color-dark, #92949c)}.comments{list-style:none;margin:0;padding:0}.comment{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-bottom:1px solid var(--ion-border-color, rgba(0, 0, 0, .06))}.comment:last-child{border-bottom:none}.comment__avatar{width:32px;height:32px;border-radius:50%;background:var(--ion-color-primary, #313131);color:var(--ion-color-primary-contrast, #fff);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0}.comment__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.comment__header{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.comment__author{font-size:.875rem;font-weight:600;color:var(--ion-text-color, #000)}.comment__date{font-size:.75rem;color:var(--ion-color-dark, #92949c);white-space:nowrap}.comment__body{margin:0;font-size:.875rem;color:var(--ion-text-color, #000);line-height:1.5;white-space:pre-line}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: EmptyStateComponent, selector: "val-empty-state", inputs: ["props"] }, { kind: "component", type: SkeletonComponent, selector: "val-skeleton", inputs: ["props"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestReviewPanelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-request-review-panel', standalone: true, imports: [ButtonComponent, EmptyStateComponent, SkeletonComponent], template: `
-    <div class="page">
-      @if (loading()) {
-        <div class="skel" aria-hidden="true">
-          <val-skeleton [props]="{ width: '100%', height: '88px', borderRadius: '14px' }" />
-          <val-skeleton [props]="{ width: '100%', height: '64px', borderRadius: '12px' }" />
-          <val-skeleton [props]="{ width: '100%', height: '80px', borderRadius: '12px' }" />
-          <val-skeleton [props]="{ width: '100%', height: '120px', borderRadius: '12px' }" />
-        </div>
-      } @else if (loadError()) {
-        <val-empty-state [props]="errorState()" />
-      } @else if (req()) {
-        <div class="detail">
-          @if (heroConfig() && heroName()) {
-            <button class="entity-hero" (click)="onHeroClick()" [disabled]="!canNavigateHero()">
-              <div class="entity-hero__media">
-                @if (heroImage() && !heroImgFailed()) {
-                  <img
-                    [src]="heroImage()"
-                    [alt]="heroName()!"
-                    loading="lazy"
-                    (error)="heroImgFailed.set(true)"
-                    class="entity-hero__img"
-                  />
-                } @else {
-                  <span class="entity-hero__placeholder" aria-hidden="true">{{
-                    heroConfig()!.placeholderIcon || '📄'
-                  }}</span>
-                }
-              </div>
-              <div class="entity-hero__body">
-                <span class="entity-hero__label">{{ t(heroConfig()!.labelKey) }}</span>
-                <span class="entity-hero__name">{{ heroName() }}</span>
-              </div>
-              @if (canNavigateHero()) {
-                <span class="entity-hero__chevron" aria-hidden="true">›</span>
-              }
-            </button>
-          }
-
-          <div class="status-card" [style.border-left-color]="statusStyle().bg">
-            <div class="status-card__top">
-              <span class="status-badge" [style.background]="statusStyle().bg" [style.color]="statusStyle().color">
-                {{ t('status_' + req()!.status) }}
-              </span>
-              <span class="submitted-at">{{ t('submittedAt') }}: {{ formatDate(req()!.createdAt) }}</span>
-            </div>
-
-            @if (config().canReview() && (req()!.status === 'pending' || req()!.status === 'in_review')) {
-              <div class="actions-row">
-                <val-button
-                  [props]="{
-                    token: 'approve',
-                    text: t('approve'),
-                    color: 'primary',
-                    fill: 'solid',
-                    shape: 'round',
-                    size: 'small',
-                    type: 'button',
-                    state: transitioning() ? 'WORKING' : 'ENABLED',
-                    handler: transition.bind(this, 'approved'),
-                  }"
-                />
-                <val-button
-                  [props]="{
-                    token: 'reject',
-                    text: t('reject'),
-                    color: 'medium',
-                    fill: 'outline',
-                    shape: 'round',
-                    size: 'small',
-                    type: 'button',
-                    state: transitioning() ? 'WORKING' : 'ENABLED',
-                    handler: transition.bind(this, 'rejected'),
-                  }"
-                />
-              </div>
-            }
-          </div>
-
-          @if (req()!.submitter) {
-            <div class="section">
-              <p class="section__title">{{ t('submitter') }}</p>
-              <div class="submitter-row">
-                <div class="submitter-avatar" aria-hidden="true">{{ submitterInitial() }}</div>
-                <div class="submitter-info">
-                  @if (req()!.submitter!.name) {
-                    <span class="submitter-name">{{ req()!.submitter!.name }}</span>
-                  }
-                  @if (req()!.submitter!.email) {
-                    <span class="submitter-email">{{ req()!.submitter!.email }}</span>
-                  }
-                  @if (req()!.submitter!.phone) {
-                    <span class="submitter-email">{{ req()!.submitter!.phone }}</span>
-                  }
-                </div>
-              </div>
-            </div>
-          }
-
-          @if (fieldEntries().length) {
-            <div class="section">
-              <p class="section__title">{{ t('fields') }}</p>
-              @for (entry of fieldEntries(); track entry.key) {
-                <div class="field-row">
-                  <span class="field-row__label">{{ entry.key }}</span>
-                  <span class="field-row__value">{{ entry.value }}</span>
-                </div>
-              }
-            </div>
-          }
-
-          @if (
-            !config().canReview() && req()!.status === 'approved' && canNavigateHero() && config().viewEntityCtaLabelKey
-          ) {
-            <val-button
-              [props]="{
-                token: 'view-entity',
-                text: t(config().viewEntityCtaLabelKey!),
-                color: 'primary',
-                fill: 'solid',
-                shape: 'round',
-                size: 'default',
-                type: 'button',
-                state: 'ENABLED',
-                handler: onHeroClick.bind(this),
-              }"
-            />
-          }
-
-          <div class="section">
-            <p class="section__title">{{ t('commentsTitle') }}</p>
-            @if (loadingComments()) {
-              <div class="section-pad">
-                <val-skeleton [props]="{ width: '100%', height: '48px', borderRadius: '8px' }" />
-              </div>
-            } @else if (comments().length === 0) {
-              <p class="no-comments">{{ t('noComments') }}</p>
-            } @else {
-              <ul class="comments">
-                @for (c of comments(); track c.commentId) {
-                  <li class="comment">
-                    <div class="comment__avatar" aria-hidden="true">{{ authorInitial(c) }}</div>
-                    <div class="comment__content">
-                      <div class="comment__header">
-                        <span class="comment__author">{{ c.author.name || c.author.email }}</span>
-                        <span class="comment__date">{{ relativeTime(c.createdAt) }}</span>
-                      </div>
-                      <p class="comment__body">{{ c.body }}</p>
-                    </div>
-                  </li>
-                }
-              </ul>
-            }
-          </div>
-        </div>
-      }
-    </div>
-  `, styles: [".page{display:flex;flex-direction:column;gap:14px}.skel{display:flex;flex-direction:column;gap:12px}.skel val-skeleton{display:block}.detail{display:flex;flex-direction:column;gap:14px}.entity-hero{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--ion-card-background, var(--ion-background-color, #fff));border-radius:14px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));width:100%;text-align:left;cursor:pointer}.entity-hero:disabled{cursor:default}.entity-hero__media{width:56px;height:56px;border-radius:12px;overflow:hidden;flex-shrink:0;background:var(--ion-color-light, #f4f5f8);display:flex;align-items:center;justify-content:center}.entity-hero__img{width:100%;height:100%;object-fit:cover}.entity-hero__placeholder{font-size:1.625rem}.entity-hero__body{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.entity-hero__label{font-size:.75rem;color:var(--ion-color-dark, #636469)}.entity-hero__name{font-size:1rem;font-weight:600;color:var(--ion-text-color, #000);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.entity-hero__chevron{font-size:1.5rem;color:var(--ion-color-dark, #92949c);line-height:1}.status-card{background:var(--ion-card-background, var(--ion-background-color, #fff));border-radius:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));border-left:4px solid;padding:14px 16px;display:flex;flex-direction:column;gap:12px}.status-card__top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.status-badge{display:inline-block;padding:4px 12px;border-radius:100px;font-size:.8125rem;font-weight:700}.submitted-at{font-size:.8125rem;color:var(--ion-color-dark-shade, #1e2023)}.actions-row{display:flex;gap:10px;flex-wrap:wrap}.section{background:var(--ion-card-background, var(--ion-background-color, #fff));border-radius:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));overflow:hidden}.section__title{margin:0;font-size:.8125rem;font-weight:600;color:var(--ion-color-dark-shade, #1e2023);padding:12px 16px 0}.section-pad{padding:12px 16px}.submitter-row{display:flex;align-items:center;gap:12px;padding:12px 16px}.submitter-avatar{width:40px;height:40px;border-radius:50%;background:var(--ion-color-primary, #313131);color:var(--ion-color-primary-contrast, #fff);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;flex-shrink:0}.submitter-info{display:flex;flex-direction:column;gap:2px;min-width:0}.submitter-name{font-size:.9375rem;font-weight:600;color:var(--ion-text-color, #000)}.submitter-email{font-size:.8125rem;color:var(--ion-color-dark, #636469);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.field-row{display:flex;flex-direction:column;gap:3px;padding:11px 16px;border-bottom:1px solid var(--ion-border-color, rgba(0, 0, 0, .06))}.field-row:last-child{border-bottom:none}.field-row__label{font-size:.75rem;color:var(--ion-color-dark, #636469);text-transform:capitalize}.field-row__value{font-size:.9375rem;color:var(--ion-text-color, #000);font-weight:500;word-break:break-word;white-space:pre-line}.no-comments{margin:0;padding:12px 16px;font-size:.875rem;color:var(--ion-color-dark, #92949c)}.comments{list-style:none;margin:0;padding:0}.comment{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-bottom:1px solid var(--ion-border-color, rgba(0, 0, 0, .06))}.comment:last-child{border-bottom:none}.comment__avatar{width:32px;height:32px;border-radius:50%;background:var(--ion-color-primary, #313131);color:var(--ion-color-primary-contrast, #fff);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0}.comment__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.comment__header{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.comment__author{font-size:.875rem;font-weight:600;color:var(--ion-text-color, #000)}.comment__date{font-size:.75rem;color:var(--ion-color-dark, #92949c);white-space:nowrap}.comment__body{margin:0;font-size:.875rem;color:var(--ion-text-color, #000);line-height:1.5;white-space:pre-line}\n"] }]
-        }], ctorParameters: () => [] });
-
 /**
  * `val-cookie-banner` — bottom/top fixed banner asking the user to choose
  * a cookie consent option. Presentational only: emits events on each
@@ -54835,260 +54985,6 @@ function buildSideNavItemsFromBottomNav(config, options = {}) {
     }));
 }
 
-/**
- * Default values for image processing
- */
-const IMAGE_DEFAULTS = {
-    maxWidth: 800,
-    maxHeight: 800,
-    quality: 0.8,
-    mimeType: 'image/jpeg',
-    maxSize: 10 * 1024 * 1024, // 10MB
-    allowedTypes: ['image/jpeg', 'image/png', 'image/webp', 'image/gif'],
-    thumbnailSize: 150,
-};
-
-/**
- * ImageService
- *
- * Service for image processing including compression, thumbnails, cropping and validation.
- * Uses HTML Canvas for all operations - no external dependencies.
- *
- * @example
- * ```typescript
- * const imageService = inject(ImageService);
- *
- * // Compress an image
- * const compressed = await imageService.compress(file, { maxWidth: 800, quality: 0.8 });
- *
- * // Generate thumbnail
- * const thumb = await imageService.thumbnail(file, 150);
- *
- * // Validate before processing
- * const validation = imageService.validate(file, { maxSize: 5 * 1024 * 1024 });
- * if (!validation.valid) {
- *   console.error(validation.message);
- * }
- * ```
- */
-class ImageService {
-    /**
-     * Compress an image maintaining aspect ratio
-     * @param file - File or Blob to compress
-     * @param options - Compression options
-     * @returns Promise with processed image data
-     */
-    async compress(file, options) {
-        const opts = {
-            maxWidth: options?.maxWidth ?? IMAGE_DEFAULTS.maxWidth,
-            maxHeight: options?.maxHeight ?? IMAGE_DEFAULTS.maxHeight,
-            quality: options?.quality ?? IMAGE_DEFAULTS.quality,
-            mimeType: options?.mimeType ?? IMAGE_DEFAULTS.mimeType,
-        };
-        const img = await this.loadImage(file);
-        const { width, height } = this.calculateDimensions(img.width, img.height, opts.maxWidth, opts.maxHeight);
-        const canvas = document.createElement('canvas');
-        canvas.width = width;
-        canvas.height = height;
-        const ctx = canvas.getContext('2d');
-        ctx.drawImage(img, 0, 0, width, height);
-        const blob = await this.canvasToBlob(canvas, opts.mimeType, opts.quality);
-        const dataUrl = canvas.toDataURL(opts.mimeType, opts.quality);
-        return {
-            blob,
-            dataUrl,
-            width,
-            height,
-            size: blob.size,
-        };
-    }
-    /**
-     * Generate a square thumbnail from an image
-     * @param file - File or Blob to process
-     * @param size - Thumbnail size in pixels (default: 150)
-     * @returns Promise with processed thumbnail
-     */
-    async thumbnail(file, size) {
-        const thumbSize = size ?? IMAGE_DEFAULTS.thumbnailSize;
-        const img = await this.loadImage(file);
-        // Calculate square crop from center
-        const minDim = Math.min(img.width, img.height);
-        const cropX = (img.width - minDim) / 2;
-        const cropY = (img.height - minDim) / 2;
-        const canvas = document.createElement('canvas');
-        canvas.width = thumbSize;
-        canvas.height = thumbSize;
-        const ctx = canvas.getContext('2d');
-        ctx.drawImage(img, cropX, cropY, minDim, minDim, 0, 0, thumbSize, thumbSize);
-        const blob = await this.canvasToBlob(canvas, IMAGE_DEFAULTS.mimeType, 0.7 // Lower quality for thumbnails
-        );
-        const dataUrl = canvas.toDataURL(IMAGE_DEFAULTS.mimeType, 0.7);
-        return {
-            blob,
-            dataUrl,
-            width: thumbSize,
-            height: thumbSize,
-            size: blob.size,
-        };
-    }
-    /**
-     * Crop an image with specific coordinates
-     * @param file - File or Blob to crop
-     * @param cropData - Crop coordinates and dimensions
-     * @param options - Optional compression options for output
-     * @returns Promise with cropped image
-     */
-    async crop(file, cropData, options) {
-        const img = await this.loadImage(file);
-        const opts = {
-            quality: options?.quality ?? IMAGE_DEFAULTS.quality,
-            mimeType: options?.mimeType ?? IMAGE_DEFAULTS.mimeType,
-        };
-        const canvas = document.createElement('canvas');
-        canvas.width = cropData.width;
-        canvas.height = cropData.height;
-        const ctx = canvas.getContext('2d');
-        ctx.drawImage(img, cropData.x, cropData.y, cropData.width, cropData.height, 0, 0, cropData.width, cropData.height);
-        // Apply max dimensions if specified
-        if (options?.maxWidth || options?.maxHeight) {
-            return this.compress(await this.canvasToBlob(canvas, opts.mimeType, 1), options);
-        }
-        const blob = await this.canvasToBlob(canvas, opts.mimeType, opts.quality);
-        const dataUrl = canvas.toDataURL(opts.mimeType, opts.quality);
-        return {
-            blob,
-            dataUrl,
-            width: cropData.width,
-            height: cropData.height,
-            size: blob.size,
-        };
-    }
-    /**
-     * Validate an image file before processing
-     * @param file - File to validate
-     * @param options - Validation options
-     * @returns Validation result with error details if invalid
-     */
-    validate(file, options) {
-        const opts = {
-            maxSize: options?.maxSize ?? IMAGE_DEFAULTS.maxSize,
-            allowedTypes: options?.allowedTypes ?? IMAGE_DEFAULTS.allowedTypes,
-        };
-        // Check file type
-        if (!opts.allowedTypes.includes(file.type)) {
-            return {
-                valid: false,
-                error: 'invalidType',
-                message: `Formato no válido. Usa: ${opts.allowedTypes.map(t => t.split('/')[1].toUpperCase()).join(', ')}`,
-            };
-        }
-        // Check file size
-        if (file.size > opts.maxSize) {
-            const maxMB = Math.round(opts.maxSize / (1024 * 1024));
-            return {
-                valid: false,
-                error: 'fileTooLarge',
-                message: `La imagen es muy grande. Máximo ${maxMB}MB`,
-            };
-        }
-        return { valid: true };
-    }
-    /**
-     * Validate image dimensions (async - requires loading image)
-     * @param file - File to validate
-     * @param options - Validation options with minWidth/minHeight
-     * @returns Promise with validation result
-     */
-    async validateDimensions(file, options) {
-        const img = await this.loadImage(file);
-        if (options.minWidth && img.width < options.minWidth) {
-            return {
-                valid: false,
-                error: 'imageTooSmall',
-                message: `La imagen debe tener al menos ${options.minWidth}px de ancho`,
-            };
-        }
-        if (options.minHeight && img.height < options.minHeight) {
-            return {
-                valid: false,
-                error: 'imageTooSmall',
-                message: `La imagen debe tener al menos ${options.minHeight}px de alto`,
-            };
-        }
-        return { valid: true };
-    }
-    /**
-     * Convert a Blob/File to a data URL
-     */
-    async toDataUrl(file) {
-        return new Promise((resolve, reject) => {
-            const reader = new FileReader();
-            reader.onload = () => resolve(reader.result);
-            reader.onerror = reject;
-            reader.readAsDataURL(file);
-        });
-    }
-    /**
-     * Convert a data URL to a Blob
-     */
-    dataUrlToBlob(dataUrl) {
-        const arr = dataUrl.split(',');
-        const mime = arr[0].match(/:(.*?);/)[1];
-        const bstr = atob(arr[1]);
-        let n = bstr.length;
-        const u8arr = new Uint8Array(n);
-        while (n--) {
-            u8arr[n] = bstr.charCodeAt(n);
-        }
-        return new Blob([u8arr], { type: mime });
-    }
-    // ============== Private Helpers ==============
-    loadImage(file) {
-        return new Promise((resolve, reject) => {
-            const img = new Image();
-            img.onload = () => {
-                URL.revokeObjectURL(img.src);
-                resolve(img);
-            };
-            img.onerror = reject;
-            img.src = URL.createObjectURL(file);
-        });
-    }
-    calculateDimensions(originalWidth, originalHeight, maxWidth, maxHeight) {
-        let width = originalWidth;
-        let height = originalHeight;
-        // Scale down if necessary, maintaining aspect ratio
-        if (width > maxWidth) {
-            height = (height * maxWidth) / width;
-            width = maxWidth;
-        }
-        if (height > maxHeight) {
-            width = (width * maxHeight) / height;
-            height = maxHeight;
-        }
-        return {
-            width: Math.round(width),
-            height: Math.round(height),
-        };
-    }
-    canvasToBlob(canvas, mimeType, quality) {
-        return new Promise((resolve, reject) => {
-            canvas.toBlob((blob) => {
-                if (blob)
-                    resolve(blob);
-                else
-                    reject(new Error('Failed to create blob from canvas'));
-            }, mimeType, quality);
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ImageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ImageService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ImageService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
 /**
  * Default values
  */