valtech-components 4.0.1039 → 4.0.1041

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.1039';
+const VERSION = '4.0.1041';
 
 function evaluateValtechAccess(rule, context, features = {}, visitedFeatures = new Set()) {
     if (rule == null)
@@ -5371,6 +5371,260 @@ function query() {
     return new QueryBuilder();
 }
 
+/**
+ * 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' }]
+        }] });
+
 /**
  * Storage Service
  *
@@ -5409,6 +5663,7 @@ class StorageService {
     constructor(storage) {
         this.storage = storage;
         this.config = inject(VALTECH_FIREBASE_CONFIG, { optional: true });
+        this.imageService = inject(ImageService);
     }
     /**
      * Prefija el path de storage con el appId si está configurado.
@@ -5654,6 +5909,52 @@ class StorageService {
         }
         return sdkResult;
     }
+    /**
+     * Procesa y sube una imagen.
+     *
+     * A diferencia de `uploadAndGetUrl`, este método es específico para imágenes:
+     * comprime por defecto con `ImageService` y puede generar un thumbnail en un
+     * path separado. Para archivos que deben conservarse byte a byte, usar
+     * `uploadAndGetUrl`.
+     */
+    async uploadImageAndGetUrl(path, file, options) {
+        const { compress = true, compression, thumbnailPath, thumbnailSize, thumbnailMetadata, ...metadata } = options ?? {};
+        const processed = compress
+            ? await this.imageService.compress(file, compression)
+            : {
+                blob: await this.materialize(file),
+                width: 0,
+                height: 0,
+                size: file.size,
+            };
+        const imageContentType = compress
+            ? (compression?.mimeType ?? IMAGE_DEFAULTS.mimeType)
+            : (metadata.contentType ?? file.type ?? 'application/octet-stream');
+        const result = await this.uploadAndGetUrl(path, processed.blob, {
+            ...metadata,
+            contentType: imageContentType,
+        });
+        let thumbnail;
+        if (thumbnailPath) {
+            const thumb = await this.imageService.thumbnail(processed.blob, thumbnailSize);
+            thumbnail = await this.uploadAndGetUrl(thumbnailPath, thumb.blob, {
+                ...metadata,
+                ...thumbnailMetadata,
+                contentType: thumbnailMetadata?.contentType ?? IMAGE_DEFAULTS.mimeType,
+            });
+        }
+        return {
+            ...result,
+            thumbnail,
+            processed: {
+                originalSize: file.size,
+                size: processed.blob.size,
+                width: processed.width,
+                height: processed.height,
+                compressed: compress,
+            },
+        };
+    }
     /**
      * Sube un archivo desde una Data URL (base64).
      *
@@ -22698,6 +22999,7 @@ class SearchSelectorComponent {
          * Resolved props after merging preset + explicit props.
          */
         this.resolvedProps = {};
+        addIcons({ chevronDownOutline });
     }
     ngOnInit() {
         this.resolveProps();
@@ -22766,6 +23068,7 @@ class SearchSelectorComponent {
       [interfaceOptions]="customPopoverOptions"
       [interface]="resolvedProps.selectInterface || 'popover'"
       [placeholder]="resolvedProps.placeholder"
+      toggleIcon="chevron-down-outline"
       [cancelText]="cancelText"
       [okText]="okText"
     >
@@ -22791,7 +23094,7 @@ class SearchSelectorComponent {
         </ion-select-option>
       }
     </ion-select>
-  `, 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-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--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: #737478;--ion-color-medium-rgb: 115,116,120;--ion-color-medium-contrast: #ffffff;--ion-color-medium-contrast-rgb: 255,255,255;--ion-color-medium-shade: #65666a;--ion-color-medium-tint: #818286;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}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)}ion-select{--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;min-height:auto;border:.0625rem solid var(--ion-color-medium);border-radius:1.5rem;margin-top:.375rem;padding-top:.5rem!important;padding-bottom:.5rem!important;padding-inline-start:1rem!important;padding-inline-end:.625rem!important}.select-option-content{display:inline-flex;align-items:center;gap:.625rem}.select-option-icon{flex:0 0 auto;font-size:1.125rem}.select-option-icon-mask{width:1.125rem;height:1.125rem;background:currentColor;mask:var(--val-select-option-icon-src) center/contain no-repeat;-webkit-mask:var(--val-select-option-icon-src) center/contain no-repeat}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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"] }] }); }
+  `, 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-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--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: #737478;--ion-color-medium-rgb: 115,116,120;--ion-color-medium-contrast: #ffffff;--ion-color-medium-contrast-rgb: 255,255,255;--ion-color-medium-shade: #65666a;--ion-color-medium-tint: #818286;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}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)}ion-select{--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;min-height:auto;border:.0625rem solid var(--ion-color-medium);border-radius:1.5rem;margin-top:.375rem;padding-top:.5rem!important;padding-bottom:.5rem!important;padding-inline-start:1rem!important;padding-inline-end:.875rem!important}.select-option-content{display:inline-flex;align-items:center;gap:.625rem}.select-option-icon{flex:0 0 auto;font-size:1.125rem}.select-option-icon-mask{width:1.125rem;height:1.125rem;background:currentColor;mask:var(--val-select-option-icon-src) center/contain no-repeat;-webkit-mask:var(--val-select-option-icon-src) center/contain no-repeat}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchSelectorComponent, decorators: [{
             type: Component,
@@ -22802,6 +23105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       [interfaceOptions]="customPopoverOptions"
       [interface]="resolvedProps.selectInterface || 'popover'"
       [placeholder]="resolvedProps.placeholder"
+      toggleIcon="chevron-down-outline"
       [cancelText]="cancelText"
       [okText]="okText"
     >
@@ -22827,8 +23131,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </ion-select-option>
       }
     </ion-select>
-  `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--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: #737478;--ion-color-medium-rgb: 115,116,120;--ion-color-medium-contrast: #ffffff;--ion-color-medium-contrast-rgb: 255,255,255;--ion-color-medium-shade: #65666a;--ion-color-medium-tint: #818286;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}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)}ion-select{--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;min-height:auto;border:.0625rem solid var(--ion-color-medium);border-radius:1.5rem;margin-top:.375rem;padding-top:.5rem!important;padding-bottom:.5rem!important;padding-inline-start:1rem!important;padding-inline-end:.625rem!important}.select-option-content{display:inline-flex;align-items:center;gap:.625rem}.select-option-icon{flex:0 0 auto;font-size:1.125rem}.select-option-icon-mask{width:1.125rem;height:1.125rem;background:currentColor;mask:var(--val-select-option-icon-src) center/contain no-repeat;-webkit-mask:var(--val-select-option-icon-src) center/contain no-repeat}\n"] }]
-        }], propDecorators: { preset: [{
+  `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-xl-wide: 1280px;--val-container-md-wide: 900px;--val-container-aside: 0px;--val-container-padding: 16px;--val-radius-xs: 10px;--val-radius-sm: 16px;--val-radius-md: 20px;--val-radius-lg: 28px;--val-radius-xl: 36px;--val-radius-full: 999px;--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: #737478;--ion-color-medium-rgb: 115,116,120;--ion-color-medium-contrast: #ffffff;--ion-color-medium-contrast-rgb: 255,255,255;--ion-color-medium-shade: #65666a;--ion-color-medium-tint: #818286;--ion-color-warning: #ffde38;--ion-color-warning-rgb: 255, 222, 56;--ion-color-warning-contrast: #000000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0c331;--ion-color-warning-tint: #ffe14c;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-dark)}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)}ion-select{--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;min-height:auto;border:.0625rem solid var(--ion-color-medium);border-radius:1.5rem;margin-top:.375rem;padding-top:.5rem!important;padding-bottom:.5rem!important;padding-inline-start:1rem!important;padding-inline-end:.875rem!important}.select-option-content{display:inline-flex;align-items:center;gap:.625rem}.select-option-icon{flex:0 0 auto;font-size:1.125rem}.select-option-icon-mask{width:1.125rem;height:1.125rem;background:currentColor;mask:var(--val-select-option-icon-src) center/contain no-repeat;-webkit-mask:var(--val-select-option-icon-src) center/contain no-repeat}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { preset: [{
                 type: Input
             }], props: [{
                 type: Input
@@ -37939,260 +38243,6 @@ 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()