@caribeng/ui 22.2.0 → 22.5.0

package/fesm2022/caribeng-ui-image-cropper.mjs

@@ -0,0 +1,671 @@
+import * as i0 from '@angular/core';
+import { inject, Injector, DestroyRef, input, model, booleanAttribute, output, signal, computed, viewChild, effect, untracked, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
+import { CbIconRegistry, CbIcon } from '@caribeng/ui/icon';
+
+/** Tamaño mínimo del recuadro (fracción del lado). */
+const MIN = 0.05;
+const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+/** Mantiene el recuadro dentro de la imagen y con un tamaño mínimo. */
+function clampRect(rect) {
+    const w = clamp(rect.w, MIN, 1);
+    const h = clamp(rect.h, MIN, 1);
+    return { x: clamp(rect.x, 0, 1 - w), y: clamp(rect.y, 0, 1 - h), w, h };
+}
+/**
+ * Ajusta el recuadro a una proporción (ancho / alto en píxeles), lo más grande
+ * posible dentro del actual y centrado en él. `ratio` null = libre.
+ */
+function fitRatio(rect, ratio, imageWidth, imageHeight) {
+    if (!ratio || !imageWidth || !imageHeight)
+        return clampRect(rect);
+    // Proporción expresada en fracciones de la imagen.
+    const r = ratio * (imageHeight / imageWidth);
+    let w = rect.w;
+    let h = w / r;
+    if (h > rect.h) {
+        h = rect.h;
+        w = h * r;
+    }
+    if (w > 1) {
+        w = 1;
+        h = w / r;
+    }
+    if (h > 1) {
+        h = 1;
+        w = h * r;
+    }
+    const cx = rect.x + rect.w / 2;
+    const cy = rect.y + rect.h / 2;
+    return clampRect({ x: cx - w / 2, y: cy - h / 2, w, h });
+}
+/** Recuadro inicial: el mayor posible con la proporción, centrado. */
+function initialRect(ratio, imageWidth, imageHeight) {
+    return fitRatio({ x: 0, y: 0, w: 1, h: 1 }, ratio, imageWidth, imageHeight);
+}
+/**
+ * Redimensiona arrastrando una esquina (`nw`, `ne`, `sw`, `se`) un desplazamiento
+ * (dx, dy) en fracciones; con proporción, el alto sigue al ancho.
+ */
+function resizeRect(rect, corner, dx, dy, ratio, imageWidth, imageHeight) {
+    let { x, y, w, h } = rect;
+    const right = x + w;
+    const bottom = y + h;
+    if (corner.includes('w'))
+        x = clamp(x + dx, 0, right - MIN);
+    const newRight = corner.includes('e') ? clamp(right + dx, x + MIN, 1) : right;
+    if (corner.includes('n'))
+        y = clamp(y + dy, 0, bottom - MIN);
+    const newBottom = corner.includes('s') ? clamp(bottom + dy, y + MIN, 1) : bottom;
+    w = newRight - x;
+    h = newBottom - y;
+    if (ratio && imageWidth && imageHeight) {
+        const r = ratio * (imageHeight / imageWidth);
+        h = w / r;
+        if (corner.includes('n'))
+            y = bottom - h;
+        if (y < 0 || y + h > 1) {
+            // No cabe: se limita por el alto.
+            h = corner.includes('n') ? bottom : 1 - y;
+            w = h * r;
+            if (corner.includes('w'))
+                x = right - w;
+            if (corner.includes('n'))
+                y = bottom - h;
+        }
+    }
+    return clampRect({ x, y, w, h });
+}
+/** Tamaño en píxeles del recorte, reducido para no pasar de `maxWidth` × `maxHeight`. */
+function outputSize(rect, imageWidth, imageHeight, output = {}) {
+    const w = Math.max(1, Math.round(rect.w * imageWidth));
+    const h = Math.max(1, Math.round(rect.h * imageHeight));
+    const scale = Math.min(1, (output.maxWidth ?? Infinity) / w, (output.maxHeight ?? Infinity) / h);
+    return { w: Math.max(1, Math.round(w * scale)), h: Math.max(1, Math.round(h * scale)) };
+}
+/**
+ * Estilo de una vista previa del recorte hecha con CSS (sin canvas): la imagen como fondo,
+ * ampliada y desplazada para que solo se vea el recuadro.
+ */
+function previewStyle(src, rect) {
+    const pos = (start, size) => (size >= 1 ? '0%' : `${(start / (1 - size)) * 100}%`);
+    return {
+        'background-image': `url("${src.replace(/"/g, '%22')}")`,
+        'background-size': `${100 / rect.w}% ${100 / rect.h}%`,
+        'background-position': `${pos(rect.x, rect.w)} ${pos(rect.y, rect.h)}`,
+        'background-repeat': 'no-repeat',
+    };
+}
+function loadImage(src) {
+    const image = new Image();
+    if (!/^(data|blob):/i.test(src))
+        image.crossOrigin = 'anonymous';
+    return new Promise((resolve, reject) => {
+        image.onload = () => resolve(image);
+        image.onerror = () => reject(new Error('No se pudo cargar la imagen'));
+        image.src = src;
+    });
+}
+/**
+ * Recorta los píxeles de la imagen. Las imágenes de otro dominio necesitan que
+ * su servidor permita CORS; si no, el navegador bloquea la lectura y se rechaza.
+ */
+async function cropImage(src, rect, doc, output = {}) {
+    const image = await loadImage(src);
+    const nw = image.naturalWidth;
+    const nh = image.naturalHeight;
+    const sw = Math.max(1, Math.round(rect.w * nw));
+    const sh = Math.max(1, Math.round(rect.h * nh));
+    const size = outputSize(rect, nw, nh, output);
+    const canvas = doc.createElement('canvas');
+    canvas.width = size.w;
+    canvas.height = size.h;
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        throw new Error('Canvas 2D no disponible');
+    if (output.circle) {
+        ctx.beginPath();
+        ctx.ellipse(size.w / 2, size.h / 2, size.w / 2, size.h / 2, 0, 0, Math.PI * 2);
+        ctx.clip();
+    }
+    ctx.imageSmoothingQuality = 'high';
+    ctx.drawImage(image, Math.round(rect.x * nw), Math.round(rect.y * nh), sw, sh, 0, 0, size.w, size.h);
+    // Un círculo necesita transparencia: siempre PNG.
+    const type = output.circle ? 'image/png' : (output.type ?? (/^data:image\/jpe?g|\.jpe?g(\?|$)/i.test(src) ? 'image/jpeg' : 'image/png'));
+    // toBlob lanza SecurityError si el canvas quedó "contaminado" (imagen sin CORS).
+    return new Promise((resolve, reject) => canvas.toBlob((blob) => (blob ? resolve(blob) : reject(new Error('Sin datos'))), type, output.quality ?? 0.92));
+}
+/** Gira la imagen un cuarto de vuelta (`1` a la derecha, `-1` a la izquierda) y la devuelve como data URL PNG. */
+async function rotateImage(src, turns, doc) {
+    const image = await loadImage(src);
+    const canvas = doc.createElement('canvas');
+    canvas.width = image.naturalHeight;
+    canvas.height = image.naturalWidth;
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        throw new Error('Canvas 2D no disponible');
+    ctx.translate(canvas.width / 2, canvas.height / 2);
+    ctx.rotate((turns * Math.PI) / 2);
+    ctx.drawImage(image, -image.naturalWidth / 2, -image.naturalHeight / 2);
+    return canvas.toDataURL('image/png');
+}
+/** Lee un archivo como data URL. */
+function readFileAsDataUrl(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(String(reader.result));
+        reader.onerror = () => reject(reader.error);
+        reader.readAsDataURL(file);
+    });
+}
+
+let nextUid = 0;
+/**
+ * Recortador de imagen de CaribeNG: recuadro que se mueve y redimensiona con ratón, dedo o
+ * teclado, proporciones fijas o libre, forma circular para fotos de perfil, giro, vista previa
+ * y selección de archivo (botón o arrastrar). Devuelve el recorte como `Blob` y data URL.
+ *
+ * @example
+ * ```html
+ * <cb-image-cropper [src]="foto" shape="circle" preview (cropped)="guardar($event.blob)" />
+ * ```
+ */
+class CbImageCropper {
+    constructor() {
+        this.t = injectCbTranslation();
+        this.document = inject(DOCUMENT);
+        this.injector = inject(Injector);
+        this.destroyRef = inject(DestroyRef);
+        this.helpId = `cb-cropper-${++nextUid}-help`;
+        /** Imagen a recortar (URL o data URL). Las de otro dominio necesitan CORS para poder recortarse. */
+        this.src = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+        /** Recuadro en fracciones de la imagen (0–1). Se inicia al cargar la imagen si no se indica. */
+        this.rect = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rect" }] : /* istanbul ignore next */ []));
+        /** Proporción ancho / alto (`null` = libre). Con `shape="circle"` siempre es 1. */
+        this.ratio = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ratio" }] : /* istanbul ignore next */ []));
+        /** Proporciones de la barra (vacío para ocultarla). */
+        this.ratios = input([
+            { label: 'free', value: null },
+            { label: '1:1', value: 1 },
+            { label: '4:3', value: 4 / 3 },
+            { label: '16:9', value: 16 / 9 },
+        ], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ratios" }] : /* istanbul ignore next */ []));
+        /** Recorte rectangular o circular (PNG con fondo transparente, para fotos de perfil). */
+        this.shape = input('rect', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+        /** Formato, calidad y tamaño máximo del recorte. */
+        this.output = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "output" }] : /* istanbul ignore next */ []));
+        /** Botones de girar 90°. */
+        this.rotatable = input(true, { ...(ngDevMode ? { debugName: "rotatable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Vista previa del recorte. */
+        this.preview = input(false, { ...(ngDevMode ? { debugName: "preview" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Botón para elegir otra imagen (y arrastrar archivos al área vacía). */
+        this.chooser = input(true, { ...(ngDevMode ? { debugName: "chooser" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Botón Recortar (sin él, recorta llamando a `crop()`). */
+        this.showApply = input(true, { ...(ngDevMode ? { debugName: "showApply" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.accept = input('image/*', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+        /** Alto máximo de la imagen en pantalla. */
+        this.maxHeight = input('24rem', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+        this.emptyMessage = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+        /** Recorte hecho con el botón Recortar o Enter. */
+        this.cropped = output();
+        /** Imagen elegida por el usuario (archivo). */
+        this.fileSelect = output();
+        /** No se pudo cargar o recortar la imagen. */
+        this.cropError = output();
+        this.corners = ['nw', 'ne', 'sw', 'se'];
+        /** Imagen en pantalla: `src`, el archivo elegido o la imagen girada. */
+        this.displaySrc = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displaySrc" }] : /* istanbul ignore next */ []));
+        this.natural = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "natural" }] : /* istanbul ignore next */ []));
+        this.busy = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        this.error = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+        this.dragOver = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragOver" }] : /* istanbul ignore next */ []));
+        this.announcement = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+        this.effRatio = computed(() => (this.shape() === 'circle' ? 1 : this.ratio()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effRatio" }] : /* istanbul ignore next */ []));
+        /** El recuadro vigente (`rect` es null hasta que carga la imagen). */
+        this.current = computed(() => this.rect() ?? { x: 0, y: 0, w: 1, h: 1 }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+        this.valueText = computed(() => {
+            const r = this.current();
+            const n = this.natural();
+            const pct = (v) => `${Math.round(v * 100)} %`;
+            const px = n ? outputSize(r, n.w, n.h, this.output()) : { w: 0, h: 0 };
+            return cbFormat(this.t().cropperValue, pct(r.w), pct(r.h), px.w, px.h);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
+        this.previewCss = computed(() => {
+            const r = this.current();
+            const n = this.natural();
+            const aspect = n ? (r.w * n.w) / (r.h * n.h) : 1;
+            return { ...previewStyle(this.displaySrc(), r), 'aspect-ratio': String(aspect) };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previewCss" }] : /* istanbul ignore next */ []));
+        this.stage = viewChild('stage', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stage" }] : /* istanbul ignore next */ []));
+        this.box = viewChild('box', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "box" }] : /* istanbul ignore next */ []));
+        this.fileInput = viewChild.required('file');
+        this.announceFlip = false;
+        const registry = inject(CbIconRegistry);
+        for (const [name, body] of Object.entries(ICONS)) {
+            if (!registry.has(name))
+                registry.register({ [name]: body });
+        }
+        effect(() => {
+            const src = this.src();
+            untracked(() => this.load(src, false));
+        });
+    }
+    // --- API pública ---
+    /** Recorta y devuelve el resultado (sin emitir `cropped`). */
+    async crop() {
+        const n = this.natural();
+        const src = this.displaySrc();
+        if (!n || !src)
+            throw new Error('Sin imagen');
+        const rect = this.current();
+        const out = { ...this.output(), circle: this.shape() === 'circle' || this.output().circle };
+        const blob = await cropImage(src, rect, this.document, out);
+        const size = outputSize(rect, n.w, n.h, out);
+        return { blob, dataUrl: await readFileAsDataUrl(blob), rect, width: size.w, height: size.h };
+    }
+    /** Abre el selector de archivos. */
+    choose() {
+        this.fileInput().nativeElement.click();
+    }
+    /** Proporción fija (ancho / alto) o libre (`null`). */
+    setRatio(ratio) {
+        this.ratio.set(ratio);
+        const n = this.natural();
+        if (n)
+            this.rect.set(fitRatio(this.current(), this.effRatio(), n.w, n.h));
+    }
+    // --- Eventos ---
+    onLoad(event) {
+        const img = event.target;
+        const n = { w: img.naturalWidth || img.width || 1, h: img.naturalHeight || img.height || 1 };
+        this.natural.set(n);
+        this.error.set('');
+        const given = this.rect();
+        this.rect.set(given ? fitRatio(clampRect(given), this.effRatio(), n.w, n.h) : initialRect(this.effRatio(), n.w, n.h));
+    }
+    onImageError() {
+        this.natural.set(null);
+        this.error.set(this.t().cropperLoadError);
+        this.cropError.emit(new Error('No se pudo cargar la imagen'));
+    }
+    async apply() {
+        if (this.busy())
+            return;
+        this.busy.set(true);
+        this.error.set('');
+        try {
+            const result = await this.crop();
+            this.cropped.emit(result);
+            this.announce(this.t().cropperDone);
+        }
+        catch (e) {
+            this.error.set(this.t().cropError);
+            this.cropError.emit(e);
+        }
+        finally {
+            this.busy.set(false);
+        }
+    }
+    async rotate(turns) {
+        const src = this.displaySrc();
+        if (!src || this.busy())
+            return;
+        this.busy.set(true);
+        try {
+            const rotated = await rotateImage(src, turns, this.document);
+            this.rect.set(null);
+            this.load(rotated, true);
+            this.announce(turns === 1 ? this.t().cropperRotatedRight : this.t().cropperRotatedLeft);
+        }
+        catch (e) {
+            this.error.set(this.t().cropError);
+            this.cropError.emit(e);
+        }
+        finally {
+            this.busy.set(false);
+        }
+    }
+    async onFile(event) {
+        const input = event.target;
+        const file = input.files?.[0];
+        input.value = '';
+        if (file)
+            await this.useFile(file);
+    }
+    onDragOver(event) {
+        if (!this.chooser())
+            return;
+        event.preventDefault();
+        this.dragOver.set(true);
+    }
+    async onDrop(event) {
+        if (!this.chooser())
+            return;
+        event.preventDefault();
+        this.dragOver.set(false);
+        const file = event.dataTransfer?.files?.[0];
+        if (file)
+            await this.useFile(file);
+    }
+    /** Mueve (`corner` null) o redimensiona el recuadro arrastrando. */
+    startDrag(event, corner) {
+        const stage = this.stage()?.nativeElement;
+        const n = this.natural();
+        if (!stage || !n || (event.pointerType === 'mouse' && event.button !== 0))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.box()?.nativeElement.focus({ preventScroll: true });
+        const bounds = stage.getBoundingClientRect();
+        const from = { x: event.clientX, y: event.clientY, rect: this.current() };
+        const move = (e) => {
+            const dx = (e.clientX - from.x) / (bounds.width || 1);
+            const dy = (e.clientY - from.y) / (bounds.height || 1);
+            this.rect.set(corner
+                ? resizeRect(from.rect, corner, dx, dy, this.effRatio(), n.w, n.h)
+                : clampRect({ ...from.rect, x: from.rect.x + dx, y: from.rect.y + dy }));
+        };
+        const up = () => {
+            this.document.removeEventListener('pointermove', move);
+            this.document.removeEventListener('pointerup', up);
+            this.document.removeEventListener('pointercancel', up);
+        };
+        this.document.addEventListener('pointermove', move);
+        this.document.addEventListener('pointerup', up);
+        this.document.addEventListener('pointercancel', up);
+    }
+    /** Flechas: mover (2 %, 10 % con Ctrl); Mayús + flechas: tamaño desde la esquina inferior derecha; Enter: recortar. */
+    onKeydown(event) {
+        const n = this.natural();
+        if (!n)
+            return;
+        if (event.key === 'Enter' && this.showApply()) {
+            event.preventDefault();
+            void this.apply();
+            return;
+        }
+        const step = event.ctrlKey || event.metaKey ? 0.1 : 0.02;
+        const deltas = { ArrowLeft: [-step, 0], ArrowRight: [step, 0], ArrowUp: [0, -step], ArrowDown: [0, step] };
+        const d = deltas[event.key];
+        if (!d)
+            return;
+        event.preventDefault();
+        const r = this.current();
+        this.rect.set(event.shiftKey ? resizeRect(r, 'se', d[0], d[1], this.effRatio(), n.w, n.h) : clampRect({ ...r, x: r.x + d[0], y: r.y + d[1] }));
+    }
+    // --- Internos ---
+    load(src, keepFocus) {
+        this.natural.set(null);
+        this.error.set('');
+        this.displaySrc.set(src);
+        if (keepFocus)
+            this.focusWhenReady();
+    }
+    async useFile(file) {
+        if (!file.type.startsWith('image/')) {
+            this.error.set(this.t().cropperInvalidFile);
+            return;
+        }
+        this.fileSelect.emit(file);
+        this.rect.set(null);
+        this.load(await readFileAsDataUrl(file), true);
+    }
+    /** El recuadro aparece cuando carga la imagen: entonces recibe el foco. */
+    focusWhenReady() {
+        const stop = effect(() => {
+            if (this.natural()) {
+                untracked(() => afterNextRender(() => this.box()?.nativeElement.focus(), { injector: this.injector }));
+                stop.destroy();
+            }
+        }, { ...(ngDevMode ? { debugName: "stop" } : /* istanbul ignore next */ {}), injector: this.injector });
+    }
+    /** Un espacio duro alterno hace que el mismo texto cuente como cambio y se vuelva a anunciar. */
+    announce(text) {
+        this.announceFlip = !this.announceFlip;
+        this.announcement.set(this.announceFlip ? text : `${text} `);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbImageCropper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbImageCropper, isStandalone: true, selector: "cb-image-cropper", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, rect: { classPropertyName: "rect", publicName: "rect", isSignal: true, isRequired: false, transformFunction: null }, ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null }, ratios: { classPropertyName: "ratios", publicName: "ratios", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, output: { classPropertyName: "output", publicName: "output", isSignal: true, isRequired: false, transformFunction: null }, rotatable: { classPropertyName: "rotatable", publicName: "rotatable", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null }, chooser: { classPropertyName: "chooser", publicName: "chooser", isSignal: true, isRequired: false, transformFunction: null }, showApply: { classPropertyName: "showApply", publicName: "showApply", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rect: "rectChange", ratio: "ratioChange", cropped: "cropped", fileSelect: "fileSelect", cropError: "cropError" }, host: { classAttribute: "cb-image-cropper" }, viewQueries: [{ propertyName: "stage", first: true, predicate: ["stage"], descendants: true, isSignal: true }, { propertyName: "box", first: true, predicate: ["box"], descendants: true, isSignal: true }, { propertyName: "fileInput", first: true, predicate: ["file"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (displaySrc()) {
+      <div class="cb-cropper__main">
+        <div class="cb-cropper__stage" #stage>
+          <img
+            class="cb-cropper__img"
+            [src]="displaySrc()"
+            alt=""
+            draggable="false"
+            [style.max-height]="maxHeight()"
+            (load)="onLoad($event)"
+            (error)="onImageError()"
+          />
+          @if (natural()) {
+            <div
+              #box
+              class="cb-cropper__box"
+              [class.cb-cropper__box--circle]="shape() === 'circle'"
+              role="slider"
+              tabindex="0"
+              [attr.aria-label]="t().cropArea"
+              [attr.aria-valuetext]="valueText()"
+              [attr.aria-describedby]="helpId"
+              [style.left.%]="current().x * 100"
+              [style.top.%]="current().y * 100"
+              [style.width.%]="current().w * 100"
+              [style.height.%]="current().h * 100"
+              (pointerdown)="startDrag($event, null)"
+              (keydown)="onKeydown($event)"
+            >
+              <span class="cb-cropper__grid" aria-hidden="true"></span>
+              @for (corner of corners; track corner) {
+                <span [class]="'cb-cropper__handle cb-cropper__handle--' + corner" aria-hidden="true" (pointerdown)="startDrag($event, corner)"></span>
+              }
+            </div>
+          }
+        </div>
+
+        @if (preview() && natural()) {
+          <div class="cb-cropper__preview-wrap">
+            <span class="cb-cropper__preview-label">{{ t().cropperPreview }}</span>
+            <div
+              class="cb-cropper__preview"
+              [class.cb-cropper__preview--circle]="shape() === 'circle'"
+              role="img"
+              [attr.aria-label]="t().cropperPreview"
+              [style]="previewCss()"
+            ></div>
+          </div>
+        }
+      </div>
+
+      <p class="cb-cropper__help" [id]="helpId">{{ t().cropInstructions }}</p>
+
+      <div class="cb-cropper__bar">
+        @if (ratios().length && shape() !== 'circle') {
+          <div class="cb-cropper__ratios" role="group" [attr.aria-label]="t().cropperRatio">
+            @for (r of ratios(); track r.label) {
+              <button type="button" class="cb-cropper__btn" [attr.aria-pressed]="ratio() === r.value" (click)="setRatio(r.value)">
+                {{ r.value === null ? t().cropFree : r.label }}
+              </button>
+            }
+          </div>
+        }
+        @if (rotatable()) {
+          <button type="button" class="cb-cropper__icon-btn" [attr.aria-label]="t().cropperRotateLeft" [attr.title]="t().cropperRotateLeft" [disabled]="busy()" (click)="rotate(-1)">
+            <cb-icon name="rotate-ccw" [size]="16" aria-hidden="true" />
+          </button>
+          <button type="button" class="cb-cropper__icon-btn" [attr.aria-label]="t().cropperRotateRight" [attr.title]="t().cropperRotateRight" [disabled]="busy()" (click)="rotate(1)">
+            <cb-icon name="rotate-cw" [size]="16" aria-hidden="true" />
+          </button>
+        }
+        <span class="cb-cropper__spacer"></span>
+        @if (chooser()) {
+          <button type="button" class="cb-cropper__btn" (click)="choose()">{{ t().cropperChange }}</button>
+        }
+        @if (showApply()) {
+          <button type="button" class="cb-cropper__btn cb-cropper__btn--primary" [disabled]="busy() || !natural()" (click)="apply()">{{ t().cropImage }}</button>
+        }
+      </div>
+    } @else {
+      <div
+        class="cb-cropper__empty"
+        [class.cb-cropper__empty--over]="dragOver()"
+        (dragover)="onDragOver($event)"
+        (dragleave)="dragOver.set(false)"
+        (drop)="onDrop($event)"
+      >
+        <cb-icon name="cb-image" [size]="32" aria-hidden="true" />
+        <p>{{ emptyMessage() ?? t().cropperEmpty }}</p>
+        @if (chooser()) {
+          <button type="button" class="cb-cropper__btn cb-cropper__btn--primary" (click)="choose()">{{ t().cropperChoose }}</button>
+        }
+      </div>
+    }
+
+    @if (error(); as e) {
+      <p class="cb-cropper__error" role="alert">{{ e }}</p>
+    }
+    <span class="cb-cropper__sr" aria-live="polite">{{ announcement() }}</span>
+    <input #file type="file" class="cb-cropper__file" [accept]="accept()" tabindex="-1" aria-hidden="true" (change)="onFile($event)" />
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:.75rem;color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-cropper__main{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem}.cb-cropper__stage{position:relative;max-width:100%;overflow:hidden;border-radius:var(--cb-radius-md, 6px);background:repeating-conic-gradient(#e2e8f0 0% 25%,#f8fafc 0% 50%) 0 0 / 16px 16px;-webkit-user-select:none;user-select:none;touch-action:none}.cb-cropper__img{display:block;max-width:100%}.cb-cropper__box{position:absolute;box-sizing:border-box;border:2px solid #fff;box-shadow:0 0 0 9999px #0000008c;cursor:move;outline:none}.cb-cropper__box--circle{border-radius:50%}.cb-cropper__box:focus-visible{border-color:var(--cb-color-focus-ring);box-shadow:0 0 0 2px #fff,0 0 0 9999px #0000008c}.cb-cropper__grid{position:absolute;inset:0;background:linear-gradient(to right,transparent calc(33.33% - .5px),rgb(255 255 255 / .5) calc(33.33% - .5px),rgb(255 255 255 / .5) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgb(255 255 255 / .5) calc(66.66% - .5px),rgb(255 255 255 / .5) calc(66.66% + .5px),transparent calc(66.66% + .5px)),linear-gradient(to bottom,transparent calc(33.33% - .5px),rgb(255 255 255 / .5) calc(33.33% - .5px),rgb(255 255 255 / .5) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgb(255 255 255 / .5) calc(66.66% - .5px),rgb(255 255 255 / .5) calc(66.66% + .5px),transparent calc(66.66% + .5px));border-radius:inherit;pointer-events:none}.cb-cropper__handle{position:absolute;width:14px;height:14px;box-sizing:border-box;border:2px solid var(--cb-color-primary);border-radius:2px;background:#fff}@media(pointer:coarse){.cb-cropper__handle{width:22px;height:22px}}.cb-cropper__handle--nw{left:-8px;top:-8px;cursor:nwse-resize}.cb-cropper__handle--ne{right:-8px;top:-8px;cursor:nesw-resize}.cb-cropper__handle--sw{left:-8px;bottom:-8px;cursor:nesw-resize}.cb-cropper__handle--se{right:-8px;bottom:-8px;cursor:nwse-resize}.cb-cropper__preview-wrap{display:flex;flex-direction:column;gap:.375rem}.cb-cropper__preview-label{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-cropper__preview{width:8rem;max-height:12rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, 6px)}.cb-cropper__preview--circle{border-radius:50%}.cb-cropper__help{margin:0;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-cropper__bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.cb-cropper__ratios{display:inline-flex;flex-wrap:wrap;gap:.25rem}.cb-cropper__spacer{flex:1}.cb-cropper__btn{min-height:2rem;padding:0 .75rem;border:1px solid var(--cb-color-border-strong, var(--cb-color-border));border-radius:var(--cb-radius-md, 6px);background:transparent;color:var(--cb-color-text);font:inherit;font-weight:var(--cb-font-weight-medium, 500);cursor:pointer}.cb-cropper__btn:hover:not(:disabled),.cb-cropper__icon-btn:hover:not(:disabled){background:var(--cb-color-surface-hover)}.cb-cropper__btn[aria-pressed=true]{border-color:var(--cb-color-primary);background:color-mix(in srgb,var(--cb-color-primary) 14%,transparent)}.cb-cropper__btn--primary{border-color:var(--cb-color-primary);background:var(--cb-color-primary);color:var(--cb-color-primary-contrast, #fff)}.cb-cropper__btn--primary:hover:not(:disabled){background:var(--cb-color-primary-700, var(--cb-color-primary))}.cb-cropper__btn:disabled,.cb-cropper__icon-btn:disabled{opacity:.5;cursor:not-allowed}.cb-cropper__icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--cb-color-border-strong, var(--cb-color-border));border-radius:var(--cb-radius-md, 6px);background:transparent;color:var(--cb-color-text);cursor:pointer}.cb-cropper__btn:focus-visible,.cb-cropper__icon-btn:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-cropper__empty{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:2.5rem 1rem;border:2px dashed var(--cb-color-border-strong, var(--cb-color-border));border-radius:var(--cb-radius-lg, 8px);color:var(--cb-color-text-muted);text-align:center}.cb-cropper__empty p{margin:0}.cb-cropper__empty--over{border-color:var(--cb-color-primary);background:color-mix(in srgb,var(--cb-color-primary) 6%,transparent)}.cb-cropper__error{margin:0;color:var(--cb-color-danger)}.cb-cropper__file{display:none}.cb-cropper__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbImageCropper, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-image-cropper', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-image-cropper' }, template: `
+    @if (displaySrc()) {
+      <div class="cb-cropper__main">
+        <div class="cb-cropper__stage" #stage>
+          <img
+            class="cb-cropper__img"
+            [src]="displaySrc()"
+            alt=""
+            draggable="false"
+            [style.max-height]="maxHeight()"
+            (load)="onLoad($event)"
+            (error)="onImageError()"
+          />
+          @if (natural()) {
+            <div
+              #box
+              class="cb-cropper__box"
+              [class.cb-cropper__box--circle]="shape() === 'circle'"
+              role="slider"
+              tabindex="0"
+              [attr.aria-label]="t().cropArea"
+              [attr.aria-valuetext]="valueText()"
+              [attr.aria-describedby]="helpId"
+              [style.left.%]="current().x * 100"
+              [style.top.%]="current().y * 100"
+              [style.width.%]="current().w * 100"
+              [style.height.%]="current().h * 100"
+              (pointerdown)="startDrag($event, null)"
+              (keydown)="onKeydown($event)"
+            >
+              <span class="cb-cropper__grid" aria-hidden="true"></span>
+              @for (corner of corners; track corner) {
+                <span [class]="'cb-cropper__handle cb-cropper__handle--' + corner" aria-hidden="true" (pointerdown)="startDrag($event, corner)"></span>
+              }
+            </div>
+          }
+        </div>
+
+        @if (preview() && natural()) {
+          <div class="cb-cropper__preview-wrap">
+            <span class="cb-cropper__preview-label">{{ t().cropperPreview }}</span>
+            <div
+              class="cb-cropper__preview"
+              [class.cb-cropper__preview--circle]="shape() === 'circle'"
+              role="img"
+              [attr.aria-label]="t().cropperPreview"
+              [style]="previewCss()"
+            ></div>
+          </div>
+        }
+      </div>
+
+      <p class="cb-cropper__help" [id]="helpId">{{ t().cropInstructions }}</p>
+
+      <div class="cb-cropper__bar">
+        @if (ratios().length && shape() !== 'circle') {
+          <div class="cb-cropper__ratios" role="group" [attr.aria-label]="t().cropperRatio">
+            @for (r of ratios(); track r.label) {
+              <button type="button" class="cb-cropper__btn" [attr.aria-pressed]="ratio() === r.value" (click)="setRatio(r.value)">
+                {{ r.value === null ? t().cropFree : r.label }}
+              </button>
+            }
+          </div>
+        }
+        @if (rotatable()) {
+          <button type="button" class="cb-cropper__icon-btn" [attr.aria-label]="t().cropperRotateLeft" [attr.title]="t().cropperRotateLeft" [disabled]="busy()" (click)="rotate(-1)">
+            <cb-icon name="rotate-ccw" [size]="16" aria-hidden="true" />
+          </button>
+          <button type="button" class="cb-cropper__icon-btn" [attr.aria-label]="t().cropperRotateRight" [attr.title]="t().cropperRotateRight" [disabled]="busy()" (click)="rotate(1)">
+            <cb-icon name="rotate-cw" [size]="16" aria-hidden="true" />
+          </button>
+        }
+        <span class="cb-cropper__spacer"></span>
+        @if (chooser()) {
+          <button type="button" class="cb-cropper__btn" (click)="choose()">{{ t().cropperChange }}</button>
+        }
+        @if (showApply()) {
+          <button type="button" class="cb-cropper__btn cb-cropper__btn--primary" [disabled]="busy() || !natural()" (click)="apply()">{{ t().cropImage }}</button>
+        }
+      </div>
+    } @else {
+      <div
+        class="cb-cropper__empty"
+        [class.cb-cropper__empty--over]="dragOver()"
+        (dragover)="onDragOver($event)"
+        (dragleave)="dragOver.set(false)"
+        (drop)="onDrop($event)"
+      >
+        <cb-icon name="cb-image" [size]="32" aria-hidden="true" />
+        <p>{{ emptyMessage() ?? t().cropperEmpty }}</p>
+        @if (chooser()) {
+          <button type="button" class="cb-cropper__btn cb-cropper__btn--primary" (click)="choose()">{{ t().cropperChoose }}</button>
+        }
+      </div>
+    }
+
+    @if (error(); as e) {
+      <p class="cb-cropper__error" role="alert">{{ e }}</p>
+    }
+    <span class="cb-cropper__sr" aria-live="polite">{{ announcement() }}</span>
+    <input #file type="file" class="cb-cropper__file" [accept]="accept()" tabindex="-1" aria-hidden="true" (change)="onFile($event)" />
+  `, styles: [":host{display:flex;flex-direction:column;gap:.75rem;color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-cropper__main{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem}.cb-cropper__stage{position:relative;max-width:100%;overflow:hidden;border-radius:var(--cb-radius-md, 6px);background:repeating-conic-gradient(#e2e8f0 0% 25%,#f8fafc 0% 50%) 0 0 / 16px 16px;-webkit-user-select:none;user-select:none;touch-action:none}.cb-cropper__img{display:block;max-width:100%}.cb-cropper__box{position:absolute;box-sizing:border-box;border:2px solid #fff;box-shadow:0 0 0 9999px #0000008c;cursor:move;outline:none}.cb-cropper__box--circle{border-radius:50%}.cb-cropper__box:focus-visible{border-color:var(--cb-color-focus-ring);box-shadow:0 0 0 2px #fff,0 0 0 9999px #0000008c}.cb-cropper__grid{position:absolute;inset:0;background:linear-gradient(to right,transparent calc(33.33% - .5px),rgb(255 255 255 / .5) calc(33.33% - .5px),rgb(255 255 255 / .5) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgb(255 255 255 / .5) calc(66.66% - .5px),rgb(255 255 255 / .5) calc(66.66% + .5px),transparent calc(66.66% + .5px)),linear-gradient(to bottom,transparent calc(33.33% - .5px),rgb(255 255 255 / .5) calc(33.33% - .5px),rgb(255 255 255 / .5) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgb(255 255 255 / .5) calc(66.66% - .5px),rgb(255 255 255 / .5) calc(66.66% + .5px),transparent calc(66.66% + .5px));border-radius:inherit;pointer-events:none}.cb-cropper__handle{position:absolute;width:14px;height:14px;box-sizing:border-box;border:2px solid var(--cb-color-primary);border-radius:2px;background:#fff}@media(pointer:coarse){.cb-cropper__handle{width:22px;height:22px}}.cb-cropper__handle--nw{left:-8px;top:-8px;cursor:nwse-resize}.cb-cropper__handle--ne{right:-8px;top:-8px;cursor:nesw-resize}.cb-cropper__handle--sw{left:-8px;bottom:-8px;cursor:nesw-resize}.cb-cropper__handle--se{right:-8px;bottom:-8px;cursor:nwse-resize}.cb-cropper__preview-wrap{display:flex;flex-direction:column;gap:.375rem}.cb-cropper__preview-label{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-cropper__preview{width:8rem;max-height:12rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, 6px)}.cb-cropper__preview--circle{border-radius:50%}.cb-cropper__help{margin:0;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-cropper__bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.cb-cropper__ratios{display:inline-flex;flex-wrap:wrap;gap:.25rem}.cb-cropper__spacer{flex:1}.cb-cropper__btn{min-height:2rem;padding:0 .75rem;border:1px solid var(--cb-color-border-strong, var(--cb-color-border));border-radius:var(--cb-radius-md, 6px);background:transparent;color:var(--cb-color-text);font:inherit;font-weight:var(--cb-font-weight-medium, 500);cursor:pointer}.cb-cropper__btn:hover:not(:disabled),.cb-cropper__icon-btn:hover:not(:disabled){background:var(--cb-color-surface-hover)}.cb-cropper__btn[aria-pressed=true]{border-color:var(--cb-color-primary);background:color-mix(in srgb,var(--cb-color-primary) 14%,transparent)}.cb-cropper__btn--primary{border-color:var(--cb-color-primary);background:var(--cb-color-primary);color:var(--cb-color-primary-contrast, #fff)}.cb-cropper__btn--primary:hover:not(:disabled){background:var(--cb-color-primary-700, var(--cb-color-primary))}.cb-cropper__btn:disabled,.cb-cropper__icon-btn:disabled{opacity:.5;cursor:not-allowed}.cb-cropper__icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--cb-color-border-strong, var(--cb-color-border));border-radius:var(--cb-radius-md, 6px);background:transparent;color:var(--cb-color-text);cursor:pointer}.cb-cropper__btn:focus-visible,.cb-cropper__icon-btn:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-cropper__empty{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:2.5rem 1rem;border:2px dashed var(--cb-color-border-strong, var(--cb-color-border));border-radius:var(--cb-radius-lg, 8px);color:var(--cb-color-text-muted);text-align:center}.cb-cropper__empty p{margin:0}.cb-cropper__empty--over{border-color:var(--cb-color-primary);background:color-mix(in srgb,var(--cb-color-primary) 6%,transparent)}.cb-cropper__error{margin:0;color:var(--cb-color-danger)}.cb-cropper__file{display:none}.cb-cropper__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], rect: [{ type: i0.Input, args: [{ isSignal: true, alias: "rect", required: false }] }, { type: i0.Output, args: ["rectChange"] }], ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }, { type: i0.Output, args: ["ratioChange"] }], ratios: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratios", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], output: [{ type: i0.Input, args: [{ isSignal: true, alias: "output", required: false }] }], rotatable: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotatable", required: false }] }], preview: [{ type: i0.Input, args: [{ isSignal: true, alias: "preview", required: false }] }], chooser: [{ type: i0.Input, args: [{ isSignal: true, alias: "chooser", required: false }] }], showApply: [{ type: i0.Input, args: [{ isSignal: true, alias: "showApply", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], cropped: [{ type: i0.Output, args: ["cropped"] }], fileSelect: [{ type: i0.Output, args: ["fileSelect"] }], cropError: [{ type: i0.Output, args: ["cropError"] }], stage: [{ type: i0.ViewChild, args: ['stage', { isSignal: true }] }], box: [{ type: i0.ViewChild, args: ['box', { isSignal: true }] }], fileInput: [{ type: i0.ViewChild, args: ['file', { isSignal: true }] }] } });
+/** Iconos propios (Lucide `image`). `rotate-ccw` y `rotate-cw` están en el set núcleo. */
+const ICONS = {
+    'cb-image': '<rect width="18" height="18" x="3" y="3" rx="2" ry="2" /><circle cx="9" cy="9" r="2" /><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />',
+};
+
+/*
+ * Public API Surface de @caribeng/ui/image-cropper
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbImageCropper, clampRect, cropImage, fitRatio, initialRect, outputSize, previewStyle, readFileAsDataUrl, resizeRect, rotateImage };