ngx-kit 4.0.0 → 6.0.0

package/fesm2022/ngx-kit-image-editor.mjs

@@ -0,0 +1,501 @@
+import * as i0 from '@angular/core';
+import { output, HostListener, Directive, input, signal, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { DecimalPipe } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { SliderComponent } from 'ngx-kit/shared';
+
+/**
+ * درگ عمومی روی پایه‌ی Pointer Events + setPointerCapture (دقیقاً همون
+ * تکنیکی که در ngx-kit/data-table برای ریسایز ستون استفاده شده) — نیازی به
+ * listener سطح document نداره چون بعد از setPointerCapture، رویدادهای
+ * pointermove/pointerup حتی بیرون از محدوده‌ی المنت هم به خودش می‌رسن.
+ *
+ * dx/dy تجمعی از لحظه‌ی pointerdown هستن (نه دلتای بین دو move متوالی)، چون
+ * معمولاً مصرف‌کننده می‌خواد «موقعیت شروع + دلتای کل» رو حساب کنه، نه جمع
+ * تدریجی گرد شونده‌ی دلتاهای ریز.
+ */
+class NgxPointerDragDirective {
+    dragStart = output();
+    dragMove = output();
+    dragEnd = output();
+    dragging = false;
+    startX = 0;
+    startY = 0;
+    onPointerDown(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.dragging = true;
+        this.startX = ev.clientX;
+        this.startY = ev.clientY;
+        ev.target.setPointerCapture(ev.pointerId);
+        this.dragStart.emit();
+    }
+    onPointerMove(ev) {
+        if (!this.dragging)
+            return;
+        this.dragMove.emit({ dx: ev.clientX - this.startX, dy: ev.clientY - this.startY });
+    }
+    onPointerUp() {
+        if (!this.dragging)
+            return;
+        this.dragging = false;
+        this.dragEnd.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxPointerDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxPointerDragDirective, isStandalone: true, selector: "[ngxPointerDrag]", outputs: { dragStart: "dragStart", dragMove: "dragMove", dragEnd: "dragEnd" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxPointerDragDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxPointerDrag]',
+                    standalone: true,
+                }]
+        }], propDecorators: { dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragMove: [{ type: i0.Output, args: ["dragMove"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }], onPointerDown: [{
+                type: HostListener,
+                args: ['pointerdown', ['$event']]
+            }], onPointerMove: [{
+                type: HostListener,
+                args: ['pointermove', ['$event']]
+            }], onPointerUp: [{
+                type: HostListener,
+                args: ['pointerup']
+            }, {
+                type: HostListener,
+                args: ['pointercancel']
+            }] } });
+
+/** یه File/Blob/data-URL/URL رو به یک HTMLImageElement بارگذاری‌شده تبدیل می‌کنه */
+function loadImage(source) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        // برای URLهای cross-origin لازم می‌شه، وگرنه canvas بعداً «tainted» می‌شه
+        // و toBlob/toDataURL با SecurityError شکست می‌خوره.
+        img.crossOrigin = 'anonymous';
+        const objectUrl = typeof source === 'string' ? null : URL.createObjectURL(source);
+        const url = objectUrl ?? source;
+        img.onload = () => {
+            if (objectUrl)
+                URL.revokeObjectURL(objectUrl);
+            resolve(img);
+        };
+        img.onerror = () => {
+            if (objectUrl)
+                URL.revokeObjectURL(objectUrl);
+            reject(new Error('بارگذاری تصویر شکست خورد'));
+        };
+        img.src = url;
+    });
+}
+/** canvas.toBlob به‌صورت Promise، به‌همراه fallback برای مرورگرهای قدیمی‌تر */
+function canvasToBlob(canvas, type = 'image/jpeg', quality = 0.92) {
+    return new Promise((resolve, reject) => {
+        canvas.toBlob((blob) => {
+            if (blob)
+                resolve(blob);
+            else
+                reject(new Error('تبدیل canvas به blob شکست خورد'));
+        }, type, quality);
+    });
+}
+/**
+ * یه کپیِ کوچیک‌شده از تصویر اصلی می‌سازه که کل UI ویرایشگر (چرخش، کراپ،
+ * پیش‌نمایش فیلترها/کارتونی) روی همین کار می‌کنه، نه روی تصویر اصلی که
+ * ممکنه چند مگاپیکسل باشه. این باعث می‌شه درگ‌کردنِ اسلایدرها یا لبه‌های
+ * کراپ روون بمونه؛ خروجی نهایی (save) همیشه از روی تصویر اصلیِ کامل رندر
+ * می‌شه، نه از روی این کپی.
+ */
+function createWorkingCopy(img, maxSize = 1200) {
+    const { width, height } = fitWithin(img.naturalWidth, img.naturalHeight, maxSize, maxSize);
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(img, 0, 0, width, height);
+    return canvas;
+}
+/** ابعاد جدید رو طوری حساب می‌کنه که از maxWidth/maxHeight بیشتر نشه، با حفظ نسبت تصویر */
+function fitWithin(width, height, maxWidth, maxHeight) {
+    if (!maxWidth && !maxHeight)
+        return { width, height };
+    let ratio = 1;
+    if (maxWidth)
+        ratio = Math.min(ratio, maxWidth / width);
+    if (maxHeight)
+        ratio = Math.min(ratio, maxHeight / height);
+    if (ratio >= 1)
+        return { width, height };
+    return { width: Math.round(width * ratio), height: Math.round(height * ratio) };
+}
+
+/**
+ * افکت «کارتونی»: چون ctx.filter استاندارد چیزی شبیه cartoon نداره (فقط
+ * brightness/contrast/saturate/grayscale/sepia/invert/blur/hue-rotate)، این
+ * یکی رو واقعاً با پردازش پیکسلی پیاده کردیم؛ دو مرحله:
+ *
+ *   ۱) Posterize: هر کانال رنگ به تعداد محدودی سطح گرد می‌شه (پهنه‌های رنگیِ
+ *      صاف و یکدست، حسِ کارتونی رنگ می‌ده).
+ *   ۲) لبه‌یابی Sobel روی نسخه‌ی خاکستریِ تصویر: هرجا شدت لبه از حد آستانه
+ *      بیشتر باشه، پیکسل تیره می‌شه (حسِ خط دور کارتونی).
+ *
+ * روی خودِ ImageData کار می‌کنه، پس هزینه‌ش با اندازه‌ی تصویر خطی‌ست؛ برای
+ * تصاویر خیلی بزرگ (>~3000px) بهتره قبلش resize بشه (که در کامپوننت اصلی
+ * با fitWithin قبل از اعمال فیلتر انجام می‌شه).
+ */
+function applyCartoonEffect(ctx, width, height, options = {}) {
+    const levels = options.levels ?? 5;
+    const edgeThreshold = options.edgeThreshold ?? 80;
+    const imageData = ctx.getImageData(0, 0, width, height);
+    const src = imageData.data;
+    // ۱) خاکستری برای Sobel
+    const gray = new Uint8ClampedArray(width * height);
+    for (let i = 0, p = 0; i < src.length; i += 4, p++) {
+        gray[p] = (src[i] * 0.299 + src[i + 1] * 0.587 + src[i + 2] * 0.114) | 0;
+    }
+    // ۲) Posterize رنگ‌ها
+    const step = 255 / (levels - 1);
+    for (let i = 0; i < src.length; i += 4) {
+        src[i] = Math.round(Math.round(src[i] / step) * step);
+        src[i + 1] = Math.round(Math.round(src[i + 1] / step) * step);
+        src[i + 2] = Math.round(Math.round(src[i + 2] / step) * step);
+    }
+    // ۳) Sobel روی gray، خط دور تیره روی src
+    const gxKernel = [-1, 0, 1, -2, 0, 2, -1, 0, 1];
+    const gyKernel = [-1, -2, -1, 0, 0, 0, 1, 2, 1];
+    for (let y = 1; y < height - 1; y++) {
+        for (let x = 1; x < width - 1; x++) {
+            let gx = 0;
+            let gy = 0;
+            let k = 0;
+            for (let dy = -1; dy <= 1; dy++) {
+                for (let dx = -1; dx <= 1; dx++) {
+                    const v = gray[(y + dy) * width + (x + dx)];
+                    gx += v * gxKernel[k];
+                    gy += v * gyKernel[k];
+                    k++;
+                }
+            }
+            const magnitude = Math.sqrt(gx * gx + gy * gy);
+            if (magnitude > edgeThreshold) {
+                const idx = (y * width + x) * 4;
+                src[idx] = 20;
+                src[idx + 1] = 20;
+                src[idx + 2] = 20;
+            }
+        }
+    }
+    ctx.putImageData(imageData, 0, 0);
+}
+
+/** تصویر مبدأ رو با زاویه‌ی داده‌شده روی یه canvas جدید (به اندازه‌ی bounding-box نتیجه) می‌چرخونه */
+function renderRotated(source, width, height, degrees) {
+    const rad = (degrees * Math.PI) / 180;
+    const sin = Math.abs(Math.sin(rad));
+    const cos = Math.abs(Math.cos(rad));
+    const newW = Math.max(1, Math.round(width * cos + height * sin));
+    const newH = Math.max(1, Math.round(width * sin + height * cos));
+    const canvas = document.createElement('canvas');
+    canvas.width = newW;
+    canvas.height = newH;
+    const ctx = canvas.getContext('2d');
+    ctx.translate(newW / 2, newH / 2);
+    ctx.rotate(rad);
+    ctx.drawImage(source, -width / 2, -height / 2, width, height);
+    return canvas;
+}
+function buildCssFilter(adjustments) {
+    const parts = [
+        `brightness(${adjustments.brightness}%)`,
+        `contrast(${adjustments.contrast}%)`,
+        `saturate(${adjustments.saturation}%)`,
+    ];
+    if (adjustments.filter === 'grayscale')
+        parts.push('grayscale(1)');
+    if (adjustments.filter === 'sepia')
+        parts.push('sepia(1)');
+    if (adjustments.filter === 'invert')
+        parts.push('invert(1)');
+    return parts.join(' ');
+}
+/**
+ * کراپ + فیلترها رو روی یه canvas خروجی می‌سازه. brightness/contrast/
+ * saturation/grayscale/sepia/invert همه با ctx.filter بومیِ Canvas 2D انجام
+ * می‌شن (شتاب‌دهی‌شده توسط مرورگر، بدون حلقه‌ی پیکسلی دستی)؛ فقط cartoon
+ * (که معادل بومی نداره) با پردازش پیکسلی جدا انجام می‌شه.
+ *
+ * maxWidth/maxHeight برای دو حالت استفاده می‌شه: پیش‌نمایش زنده (عدد کوچیک،
+ * برای واکنش‌گرا موندن حین کشیدن اسلایدرها) و خروجی نهایی (بدون محدودیت یا
+ * محدودیت دلخواه کاربر).
+ */
+function renderComposite(source, sourceWidth, sourceHeight, crop, adjustments, maxWidth, maxHeight) {
+    const { width: outW, height: outH } = fitWithin(crop.width, crop.height, maxWidth, maxHeight);
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.max(1, outW);
+    canvas.height = Math.max(1, outH);
+    const ctx = canvas.getContext('2d');
+    ctx.filter = buildCssFilter(adjustments);
+    ctx.drawImage(source, crop.x, crop.y, crop.width, crop.height, 0, 0, canvas.width, canvas.height);
+    ctx.filter = 'none';
+    if (adjustments.filter === 'cartoon') {
+        applyCartoonEffect(ctx, canvas.width, canvas.height);
+    }
+    return canvas;
+}
+
+/**
+ * ویرایشگر تصویر: کراپ + چرخش + روشنایی/کنتراست/اشباع + فیلترهای آماده
+ * (سیاه‌وسفید، سپیا، معکوس، کارتونی) + فشرده‌سازی خروجی. کاملاً روی Canvas
+ * خام پیاده شده، بدون هیچ وابستگی خارجی‌ای.
+ *
+ * نکته‌ی مهمِ معماری: تمام تعامل زنده (چرخوندن، جابه‌جا/ریسایز کراپ‌باکس،
+ * پیش‌نمایش فیلترها حتی کارتونی) روی یه کپیِ کوچیک‌شده از تصویر انجام می‌شه
+ * (createWorkingCopy)، نه روی تصویر اصلی که ممکنه چند مگاپیکسل باشه — وگرنه
+ * درگ‌کردن اسلایدرها/گوشه‌های کراپ رو کاربر حس تاخیر می‌کرد. فقط لحظه‌ی
+ * save()، رندر نهایی از روی تصویر اصلیِ کامل انجام می‌شه.
+ */
+class NgxImageEditorComponent {
+    source = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []));
+    /** قفل نسبتِ کراپ (مثلاً ۱ برای آواتار مربعی)؛ undefined یعنی آزاد */
+    aspectRatio = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "aspectRatio" }] : /* istanbul ignore next */ []));
+    outputMaxWidth = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outputMaxWidth" }] : /* istanbul ignore next */ []));
+    outputMaxHeight = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outputMaxHeight" }] : /* istanbul ignore next */ []));
+    outputType = input('image/jpeg', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outputType" }] : /* istanbul ignore next */ []));
+    /** حداکثر عرض نمایشِ ناحیه‌ی کراپ روی صفحه (پیکسل) */
+    displayMaxWidth = input(420, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayMaxWidth" }] : /* istanbul ignore next */ []));
+    saved = output();
+    cancelled = output();
+    loading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    saving = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []));
+    loadError = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadError" }] : /* istanbul ignore next */ []));
+    originalImage = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "originalImage" }] : /* istanbul ignore next */ []));
+    workingCanvas = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "workingCanvas" }] : /* istanbul ignore next */ []));
+    rotation = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rotation" }] : /* istanbul ignore next */ []));
+    brightness = signal(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brightness" }] : /* istanbul ignore next */ []));
+    contrast = signal(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contrast" }] : /* istanbul ignore next */ []));
+    saturation = signal(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "saturation" }] : /* istanbul ignore next */ []));
+    filterPreset = signal('none', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterPreset" }] : /* istanbul ignore next */ []));
+    quality = signal(0.92, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "quality" }] : /* istanbul ignore next */ []));
+    crop = signal({ x: 0, y: 0, width: 0, height: 0 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "crop" }] : /* istanbul ignore next */ []));
+    adjustments = computed(() => ({
+        brightness: this.brightness(),
+        contrast: this.contrast(),
+        saturation: this.saturation(),
+        rotation: this.rotation(),
+        filter: this.filterPreset(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "adjustments" }] : /* istanbul ignore next */ []));
+    /** تصویرِ (کوچیک‌شده‌یِ) چرخیده — پایه‌ی نمایش صحنه‌ی کراپ */
+    rotatedWorkingCanvas = computed(() => {
+        const wc = this.workingCanvas();
+        if (!wc)
+            return null;
+        return renderRotated(wc, wc.width, wc.height, this.rotation());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rotatedWorkingCanvas" }] : /* istanbul ignore next */ []));
+    displayScale = computed(() => {
+        const rc = this.rotatedWorkingCanvas();
+        if (!rc)
+            return 1;
+        return Math.min(1, this.displayMaxWidth() / rc.width);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayScale" }] : /* istanbul ignore next */ []));
+    stageImageUrl = computed(() => {
+        const rc = this.rotatedWorkingCanvas();
+        return rc ? rc.toDataURL('image/png') : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stageImageUrl" }] : /* istanbul ignore next */ []));
+    stageSize = computed(() => {
+        const rc = this.rotatedWorkingCanvas();
+        const scale = this.displayScale();
+        return rc ? { width: rc.width * scale, height: rc.height * scale } : { width: 0, height: 0 };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stageSize" }] : /* istanbul ignore next */ []));
+    cropOverlayStyle = computed(() => {
+        const scale = this.displayScale();
+        const c = this.crop();
+        return {
+            left: `${c.x * scale}px`,
+            top: `${c.y * scale}px`,
+            width: `${c.width * scale}px`,
+            height: `${c.height * scale}px`,
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cropOverlayStyle" }] : /* istanbul ignore next */ []));
+    /** پیش‌نمایش نهایی (کوچیک، حداکثر ۴۸۰ پیکسل) — شامل همه‌چیز، حتی افکت کارتونی */
+    previewUrl = computed(() => {
+        const rc = this.rotatedWorkingCanvas();
+        const c = this.crop();
+        if (!rc || c.width <= 0 || c.height <= 0)
+            return null;
+        const canvas = renderComposite(rc, rc.width, rc.height, c, this.adjustments(), 480, 480);
+        return canvas.toDataURL('image/png');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewUrl" }] : /* istanbul ignore next */ []));
+    moveSnapshot = null;
+    resizeSnapshot = null;
+    constructor() {
+        // بارگذاری تصویر هروقت source عوض بشه
+        effect(() => {
+            const src = this.source();
+            if (!src) {
+                this.originalImage.set(null);
+                this.workingCanvas.set(null);
+                return;
+            }
+            this.loading.set(true);
+            this.loadError.set(null);
+            loadImage(src)
+                .then((img) => {
+                this.originalImage.set(img);
+                this.workingCanvas.set(createWorkingCopy(img));
+                this.resetAdjustments();
+            })
+                .catch((err) => this.loadError.set(err?.message ?? 'خطا در بارگذاری تصویر'))
+                .finally(() => this.loading.set(false));
+        });
+        // هر وقت چرخیده‌شده عوض بشه (بارگذاریِ تصویر جدید یا چرخش)، کراپ روی کل قاب ریست بشه
+        effect(() => {
+            const rc = this.rotatedWorkingCanvas();
+            if (rc) {
+                this.crop.set({ x: 0, y: 0, width: rc.width, height: rc.height });
+            }
+        });
+    }
+    resetAdjustments() {
+        this.rotation.set(0);
+        this.brightness.set(100);
+        this.contrast.set(100);
+        this.saturation.set(100);
+        this.filterPreset.set('none');
+    }
+    rotateBy(delta) {
+        this.rotation.update((r) => {
+            let next = r + delta;
+            if (next > 180)
+                next -= 360;
+            if (next < -180)
+                next += 360;
+            return next;
+        });
+    }
+    setFilter(preset) {
+        this.filterPreset.set(preset);
+    }
+    // ---------- درگ جابه‌جاییِ کل کراپ‌باکس ----------
+    onMoveDragStart() {
+        this.moveSnapshot = { ...this.crop() };
+    }
+    onMoveDragMove(delta) {
+        const rc = this.rotatedWorkingCanvas();
+        const snap = this.moveSnapshot;
+        if (!rc || !snap)
+            return;
+        const scale = this.displayScale();
+        const dxSrc = delta.dx / scale;
+        const dySrc = delta.dy / scale;
+        const maxX = Math.max(0, rc.width - snap.width);
+        const maxY = Math.max(0, rc.height - snap.height);
+        const x = Math.min(Math.max(0, snap.x + dxSrc), maxX);
+        const y = Math.min(Math.max(0, snap.y + dySrc), maxY);
+        this.crop.set({ ...snap, x, y });
+    }
+    // ---------- درگ ریسایز از گوشه‌ها ----------
+    onResizeDragStart() {
+        this.resizeSnapshot = { ...this.crop() };
+    }
+    onResizeDragMove(corner, delta) {
+        const rc = this.rotatedWorkingCanvas();
+        const snap = this.resizeSnapshot;
+        if (!rc || !snap)
+            return;
+        const scale = this.displayScale();
+        const dxSrc = delta.dx / scale;
+        const dySrc = delta.dy / scale;
+        const minSize = 24;
+        let { x, y, width, height } = snap;
+        if (corner === 'nw' || corner === 'sw') {
+            const newX = Math.min(snap.x + dxSrc, snap.x + snap.width - minSize);
+            x = Math.max(0, newX);
+            width = snap.x + snap.width - x;
+        }
+        if (corner === 'ne' || corner === 'se') {
+            width = Math.min(Math.max(minSize, snap.width + dxSrc), rc.width - snap.x);
+        }
+        if (corner === 'nw' || corner === 'ne') {
+            const newY = Math.min(snap.y + dySrc, snap.y + snap.height - minSize);
+            y = Math.max(0, newY);
+            height = snap.y + snap.height - y;
+        }
+        if (corner === 'sw' || corner === 'se') {
+            height = Math.min(Math.max(minSize, snap.height + dySrc), rc.height - snap.y);
+        }
+        const ratio = this.aspectRatio();
+        if (ratio) {
+            height = width / ratio;
+        }
+        this.crop.set({ x, y, width, height });
+    }
+    cancel() {
+        this.cancelled.emit();
+    }
+    async save() {
+        const original = this.originalImage();
+        const working = this.workingCanvas();
+        if (!original || !working)
+            return;
+        this.saving.set(true);
+        try {
+            // نسبت مقیاس بین کپیِ کوچیک‌شده (که کراپ/چرخش روش تعریف شده) و تصویر
+            // اصلیِ کامل. چون createWorkingCopy مقیاس یکنواخت (هم‌جهت) اعمال
+            // می‌کنه، همین یه ضریب برای هر دو بعد و بعد از چرخش هم معتبر می‌مونه.
+            const scaleToOriginal = original.naturalWidth / working.width;
+            const rotatedFull = renderRotated(original, original.naturalWidth, original.naturalHeight, this.rotation());
+            const c = this.crop();
+            const cropInFullRes = {
+                x: c.x * scaleToOriginal,
+                y: c.y * scaleToOriginal,
+                width: c.width * scaleToOriginal,
+                height: c.height * scaleToOriginal,
+            };
+            const finalCanvas = renderComposite(rotatedFull, rotatedFull.width, rotatedFull.height, cropInFullRes, this.adjustments(), this.outputMaxWidth(), this.outputMaxHeight());
+            const type = this.outputType();
+            const blob = await canvasToBlob(finalCanvas, type, this.quality());
+            const dataUrl = finalCanvas.toDataURL(type, this.quality());
+            this.saved.emit({ blob, dataUrl, width: finalCanvas.width, height: finalCanvas.height });
+        }
+        finally {
+            this.saving.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxImageEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxImageEditorComponent, isStandalone: true, selector: "ngx-image-editor", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, outputMaxWidth: { classPropertyName: "outputMaxWidth", publicName: "outputMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, outputMaxHeight: { classPropertyName: "outputMaxHeight", publicName: "outputMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, outputType: { classPropertyName: "outputType", publicName: "outputType", isSignal: true, isRequired: false, transformFunction: null }, displayMaxWidth: { classPropertyName: "displayMaxWidth", publicName: "displayMaxWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", cancelled: "cancelled" }, host: { classAttribute: "ngx-image-editor-host" }, ngImport: i0, template: "@if (loading()) {\n  <div class=\"ngx-ie-state\">\u062F\u0631 \u062D\u0627\u0644 \u0628\u0627\u0631\u06AF\u0630\u0627\u0631\u06CC \u062A\u0635\u0648\u06CC\u0631\u2026</div>\n} @else if (loadError()) {\n  <div class=\"ngx-ie-state ngx-ie-state--error\">{{ loadError() }}</div>\n} @else if (stageImageUrl()) {\n  <div class=\"ngx-ie-layout\">\n    <div class=\"ngx-ie-stage-wrap\">\n      <div\n        class=\"ngx-ie-stage\"\n        [style.width.px]=\"stageSize().width\"\n        [style.height.px]=\"stageSize().height\">\n        <img class=\"ngx-ie-stage-img\" [src]=\"stageImageUrl()\" alt=\"\" draggable=\"false\" />\n\n        <div\n          class=\"ngx-ie-crop-box\"\n          [style.left]=\"cropOverlayStyle().left\"\n          [style.top]=\"cropOverlayStyle().top\"\n          [style.width]=\"cropOverlayStyle().width\"\n          [style.height]=\"cropOverlayStyle().height\"\n          ngxPointerDrag\n          (dragStart)=\"onMoveDragStart()\"\n          (dragMove)=\"onMoveDragMove($event)\">\n          <span\n            class=\"ngx-ie-handle ngx-ie-handle--nw\"\n            ngxPointerDrag\n            (dragStart)=\"onResizeDragStart()\"\n            (dragMove)=\"onResizeDragMove('nw', $event)\"></span>\n          <span\n            class=\"ngx-ie-handle ngx-ie-handle--ne\"\n            ngxPointerDrag\n            (dragStart)=\"onResizeDragStart()\"\n            (dragMove)=\"onResizeDragMove('ne', $event)\"></span>\n          <span\n            class=\"ngx-ie-handle ngx-ie-handle--sw\"\n            ngxPointerDrag\n            (dragStart)=\"onResizeDragStart()\"\n            (dragMove)=\"onResizeDragMove('sw', $event)\"></span>\n          <span\n            class=\"ngx-ie-handle ngx-ie-handle--se\"\n            ngxPointerDrag\n            (dragStart)=\"onResizeDragStart()\"\n            (dragMove)=\"onResizeDragMove('se', $event)\"></span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"ngx-ie-panel\">\n      <div class=\"ngx-ie-preview\">\n        @if (previewUrl(); as url) {\n          <img [src]=\"url\" alt=\"\u067E\u06CC\u0634\u200C\u0646\u0645\u0627\u06CC\u0634\" />\n        }\n      </div>\n\n      <div class=\"ngx-ie-row ngx-ie-rotate-row\">\n        <button type=\"button\" (click)=\"rotateBy(-90)\" title=\"\u0686\u0631\u062E\u0634 \u06F9\u06F0 \u062F\u0631\u062C\u0647 \u0628\u0647 \u0686\u067E\">\u27F2 90</button>\n        <button type=\"button\" (click)=\"rotateBy(90)\" title=\"\u0686\u0631\u062E\u0634 \u06F9\u06F0 \u062F\u0631\u062C\u0647 \u0628\u0647 \u0631\u0627\u0633\u062A\">\u27F3 90</button>\n      </div>\n\n      <label class=\"ngx-ie-field\">\n        <span>\u0686\u0631\u062E\u0634 \u062F\u0642\u06CC\u0642 ({{ rotation() }}\u00B0)</span>\n        <slider\n          [ngModel]=\"rotation()\"\n          (ngModelChange)=\"rotation.set($event)\"\n          [min]=\"-180\"\n          [max]=\"180\"></slider>\n      </label>\n\n      <label class=\"ngx-ie-field\">\n        <span>\u0631\u0648\u0634\u0646\u0627\u06CC\u06CC ({{ brightness() }}%)</span>\n        <slider\n          [ngModel]=\"brightness()\"\n          (ngModelChange)=\"brightness.set($event)\"\n          [min]=\"0\"\n          [max]=\"200\"></slider>\n      </label>\n\n      <label class=\"ngx-ie-field\">\n        <span>\u06A9\u0646\u062A\u0631\u0627\u0633\u062A ({{ contrast() }}%)</span>\n        <slider\n          [ngModel]=\"contrast()\"\n          (ngModelChange)=\"contrast.set($event)\"\n          [min]=\"0\"\n          [max]=\"200\"></slider>\n      </label>\n\n      <label class=\"ngx-ie-field\">\n        <span>\u0627\u0634\u0628\u0627\u0639 \u0631\u0646\u06AF ({{ saturation() }}%)</span>\n        <slider\n          [ngModel]=\"saturation()\"\n          (ngModelChange)=\"saturation.set($event)\"\n          [min]=\"0\"\n          [max]=\"200\"></slider>\n      </label>\n\n      <div class=\"ngx-ie-field\">\n        <span>\u0627\u0641\u06A9\u062A</span>\n        <div class=\"ngx-ie-filter-row\">\n          <button\n            type=\"button\"\n            [class.active]=\"filterPreset() === 'none'\"\n            (click)=\"setFilter('none')\">\n            \u0647\u06CC\u0686\u200C\u06A9\u062F\u0627\u0645\n          </button>\n          <button\n            type=\"button\"\n            [class.active]=\"filterPreset() === 'grayscale'\"\n            (click)=\"setFilter('grayscale')\">\n            \u0633\u06CC\u0627\u0647\u200C\u0648\u0633\u0641\u06CC\u062F\n          </button>\n          <button\n            type=\"button\"\n            [class.active]=\"filterPreset() === 'sepia'\"\n            (click)=\"setFilter('sepia')\">\n            \u0633\u067E\u06CC\u0627\n          </button>\n          <button\n            type=\"button\"\n            [class.active]=\"filterPreset() === 'invert'\"\n            (click)=\"setFilter('invert')\">\n            \u0645\u0639\u06A9\u0648\u0633\n          </button>\n          <button\n            type=\"button\"\n            [class.active]=\"filterPreset() === 'cartoon'\"\n            (click)=\"setFilter('cartoon')\">\n            \u06A9\u0627\u0631\u062A\u0648\u0646\u06CC\n          </button>\n        </div>\n      </div>\n\n      <label class=\"ngx-ie-field\">\n        <span>\u06A9\u06CC\u0641\u06CC\u062A \u062E\u0631\u0648\u062C\u06CC ({{ quality() * 100 | number: '1.0-0' }}\u066A)</span>\n        <slider\n          [ngModel]=\"quality() * 100\"\n          (ngModelChange)=\"quality.set($event / 100)\"\n          [min]=\"10\"\n          [max]=\"100\"></slider>\n      </label>\n\n      <div class=\"ngx-ie-row ngx-ie-actions\">\n        <button type=\"button\" class=\"ngx-ie-btn-secondary\" (click)=\"cancel()\">\u0627\u0646\u0635\u0631\u0627\u0641</button>\n        <button type=\"button\" class=\"ngx-ie-btn-primary\" [disabled]=\"saving()\" (click)=\"save()\">\n          {{ saving() ? '\u062F\u0631 \u062D\u0627\u0644 \u0630\u062E\u06CC\u0631\u0647\u2026' : '\u0630\u062E\u06CC\u0631\u0647' }}\n        </button>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:block}.ngx-ie-state{padding:2rem;text-align:center;color:light-dark(#6b7280,#9ca3af)}.ngx-ie-state--error{color:light-dark(#b91c1c,#f87171)}.ngx-ie-layout{display:flex;flex-wrap:wrap;gap:1.25rem}.ngx-ie-stage-wrap{display:flex;align-items:flex-start;justify-content:center;padding:.5rem;background:light-dark(#f3f4f6,#18181b);border-radius:10px}.ngx-ie-stage{position:relative;touch-action:none;-webkit-user-select:none;user-select:none}.ngx-ie-stage-img{display:block;inline-size:100%;block-size:100%;border-radius:4px;pointer-events:none}.ngx-ie-crop-box{position:absolute;box-sizing:border-box;border:2px solid #2563eb;box-shadow:0 0 0 9999px #00000073;cursor:move;touch-action:none}.ngx-ie-handle{position:absolute;inline-size:14px;block-size:14px;background:#fff;border:2px solid #2563eb;border-radius:50%;touch-action:none}.ngx-ie-handle--nw{inset-inline-start:-7px;inset-block-start:-7px;cursor:nwse-resize}.ngx-ie-handle--ne{inset-inline-end:-7px;inset-block-start:-7px;cursor:nesw-resize}.ngx-ie-handle--sw{inset-inline-start:-7px;inset-block-end:-7px;cursor:nesw-resize}.ngx-ie-handle--se{inset-inline-end:-7px;inset-block-end:-7px;cursor:nwse-resize}.ngx-ie-panel{flex:1;min-inline-size:240px;display:flex;flex-direction:column;gap:.75rem}.ngx-ie-preview{display:flex;align-items:center;justify-content:center;min-block-size:100px;background:light-dark(#f3f4f6,#18181b);border-radius:8px;overflow:hidden}.ngx-ie-preview img{max-inline-size:100%;max-block-size:160px;display:block}.ngx-ie-field{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem;color:light-dark(#374151,#d4d4d8)}.ngx-ie-row{display:flex;gap:.5rem}.ngx-ie-rotate-row button,.ngx-ie-filter-row button{appearance:none;border:1px solid light-dark(#e5e7eb,#33333a);background:light-dark(#ffffff,#232327);color:light-dark(#374151,#d4d4d8);border-radius:999px;padding:.4rem .85rem;font-size:.75rem;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,transform .15s ease,color .15s ease}.ngx-ie-rotate-row button:hover,.ngx-ie-filter-row button:hover{background:light-dark(#f3f4f6,#2c2c31);transform:translateY(-1px)}.ngx-ie-rotate-row button:active,.ngx-ie-filter-row button:active{transform:translateY(0)}.ngx-ie-rotate-row button.active,.ngx-ie-filter-row button.active{background:light-dark(#2563eb,#3b82f6);border-color:light-dark(#2563eb,#3b82f6);color:#fff;box-shadow:0 2px 10px light-dark(rgba(37,99,235,.3),rgba(59,130,246,.3))}.ngx-ie-filter-row{display:flex;flex-wrap:wrap;gap:.4rem}.ngx-ie-actions{margin-block-start:auto;justify-content:flex-end}.ngx-ie-btn-primary,.ngx-ie-btn-secondary{appearance:none;border:none;border-radius:8px;padding:.55rem 1.1rem;font-size:.85rem;cursor:pointer;font-weight:500;transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease}.ngx-ie-btn-primary:hover,.ngx-ie-btn-secondary:hover{transform:translateY(-1px)}.ngx-ie-btn-primary:active,.ngx-ie-btn-secondary:active{transform:translateY(0)}.ngx-ie-btn-primary{background:light-dark(#2563eb,#3b82f6);color:#fff;box-shadow:0 2px 10px light-dark(rgba(37,99,235,.25),rgba(59,130,246,.25))}.ngx-ie-btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}.ngx-ie-btn-secondary{background:light-dark(#e5e7eb,#3f3f46);color:light-dark(#374151,#e4e4e7)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SliderComponent, selector: "slider", inputs: ["step", "min", "max", "background", "isBgTransparent"], outputs: ["change"] }, { kind: "directive", type: NgxPointerDragDirective, selector: "[ngxPointerDrag]", outputs: ["dragStart", "dragMove", "dragEnd"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxImageEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-image-editor', standalone: true, imports: [FormsModule, DecimalPipe, SliderComponent, NgxPointerDragDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ngx-image-editor-host' }, template: "@if (loading()) {\n  <div class=\"ngx-ie-state\">\u062F\u0631 \u062D\u0627\u0644 \u0628\u0627\u0631\u06AF\u0630\u0627\u0631\u06CC \u062A\u0635\u0648\u06CC\u0631\u2026</div>\n} @else if (loadError()) {\n  <div class=\"ngx-ie-state ngx-ie-state--error\">{{ loadError() }}</div>\n} @else if (stageImageUrl()) {\n  <div class=\"ngx-ie-layout\">\n    <div class=\"ngx-ie-stage-wrap\">\n      <div\n        class=\"ngx-ie-stage\"\n        [style.width.px]=\"stageSize().width\"\n        [style.height.px]=\"stageSize().height\">\n        <img class=\"ngx-ie-stage-img\" [src]=\"stageImageUrl()\" alt=\"\" draggable=\"false\" />\n\n        <div\n          class=\"ngx-ie-crop-box\"\n          [style.left]=\"cropOverlayStyle().left\"\n          [style.top]=\"cropOverlayStyle().top\"\n          [style.width]=\"cropOverlayStyle().width\"\n          [style.height]=\"cropOverlayStyle().height\"\n          ngxPointerDrag\n          (dragStart)=\"onMoveDragStart()\"\n          (dragMove)=\"onMoveDragMove($event)\">\n          <span\n            class=\"ngx-ie-handle ngx-ie-handle--nw\"\n            ngxPointerDrag\n            (dragStart)=\"onResizeDragStart()\"\n            (dragMove)=\"onResizeDragMove('nw', $event)\"></span>\n          <span\n            class=\"ngx-ie-handle ngx-ie-handle--ne\"\n            ngxPointerDrag\n            (dragStart)=\"onResizeDragStart()\"\n            (dragMove)=\"onResizeDragMove('ne', $event)\"></span>\n          <span\n            class=\"ngx-ie-handle ngx-ie-handle--sw\"\n            ngxPointerDrag\n            (dragStart)=\"onResizeDragStart()\"\n            (dragMove)=\"onResizeDragMove('sw', $event)\"></span>\n          <span\n            class=\"ngx-ie-handle ngx-ie-handle--se\"\n            ngxPointerDrag\n            (dragStart)=\"onResizeDragStart()\"\n            (dragMove)=\"onResizeDragMove('se', $event)\"></span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"ngx-ie-panel\">\n      <div class=\"ngx-ie-preview\">\n        @if (previewUrl(); as url) {\n          <img [src]=\"url\" alt=\"\u067E\u06CC\u0634\u200C\u0646\u0645\u0627\u06CC\u0634\" />\n        }\n      </div>\n\n      <div class=\"ngx-ie-row ngx-ie-rotate-row\">\n        <button type=\"button\" (click)=\"rotateBy(-90)\" title=\"\u0686\u0631\u062E\u0634 \u06F9\u06F0 \u062F\u0631\u062C\u0647 \u0628\u0647 \u0686\u067E\">\u27F2 90</button>\n        <button type=\"button\" (click)=\"rotateBy(90)\" title=\"\u0686\u0631\u062E\u0634 \u06F9\u06F0 \u062F\u0631\u062C\u0647 \u0628\u0647 \u0631\u0627\u0633\u062A\">\u27F3 90</button>\n      </div>\n\n      <label class=\"ngx-ie-field\">\n        <span>\u0686\u0631\u062E\u0634 \u062F\u0642\u06CC\u0642 ({{ rotation() }}\u00B0)</span>\n        <slider\n          [ngModel]=\"rotation()\"\n          (ngModelChange)=\"rotation.set($event)\"\n          [min]=\"-180\"\n          [max]=\"180\"></slider>\n      </label>\n\n      <label class=\"ngx-ie-field\">\n        <span>\u0631\u0648\u0634\u0646\u0627\u06CC\u06CC ({{ brightness() }}%)</span>\n        <slider\n          [ngModel]=\"brightness()\"\n          (ngModelChange)=\"brightness.set($event)\"\n          [min]=\"0\"\n          [max]=\"200\"></slider>\n      </label>\n\n      <label class=\"ngx-ie-field\">\n        <span>\u06A9\u0646\u062A\u0631\u0627\u0633\u062A ({{ contrast() }}%)</span>\n        <slider\n          [ngModel]=\"contrast()\"\n          (ngModelChange)=\"contrast.set($event)\"\n          [min]=\"0\"\n          [max]=\"200\"></slider>\n      </label>\n\n      <label class=\"ngx-ie-field\">\n        <span>\u0627\u0634\u0628\u0627\u0639 \u0631\u0646\u06AF ({{ saturation() }}%)</span>\n        <slider\n          [ngModel]=\"saturation()\"\n          (ngModelChange)=\"saturation.set($event)\"\n          [min]=\"0\"\n          [max]=\"200\"></slider>\n      </label>\n\n      <div class=\"ngx-ie-field\">\n        <span>\u0627\u0641\u06A9\u062A</span>\n        <div class=\"ngx-ie-filter-row\">\n          <button\n            type=\"button\"\n            [class.active]=\"filterPreset() === 'none'\"\n            (click)=\"setFilter('none')\">\n            \u0647\u06CC\u0686\u200C\u06A9\u062F\u0627\u0645\n          </button>\n          <button\n            type=\"button\"\n            [class.active]=\"filterPreset() === 'grayscale'\"\n            (click)=\"setFilter('grayscale')\">\n            \u0633\u06CC\u0627\u0647\u200C\u0648\u0633\u0641\u06CC\u062F\n          </button>\n          <button\n            type=\"button\"\n            [class.active]=\"filterPreset() === 'sepia'\"\n            (click)=\"setFilter('sepia')\">\n            \u0633\u067E\u06CC\u0627\n          </button>\n          <button\n            type=\"button\"\n            [class.active]=\"filterPreset() === 'invert'\"\n            (click)=\"setFilter('invert')\">\n            \u0645\u0639\u06A9\u0648\u0633\n          </button>\n          <button\n            type=\"button\"\n            [class.active]=\"filterPreset() === 'cartoon'\"\n            (click)=\"setFilter('cartoon')\">\n            \u06A9\u0627\u0631\u062A\u0648\u0646\u06CC\n          </button>\n        </div>\n      </div>\n\n      <label class=\"ngx-ie-field\">\n        <span>\u06A9\u06CC\u0641\u06CC\u062A \u062E\u0631\u0648\u062C\u06CC ({{ quality() * 100 | number: '1.0-0' }}\u066A)</span>\n        <slider\n          [ngModel]=\"quality() * 100\"\n          (ngModelChange)=\"quality.set($event / 100)\"\n          [min]=\"10\"\n          [max]=\"100\"></slider>\n      </label>\n\n      <div class=\"ngx-ie-row ngx-ie-actions\">\n        <button type=\"button\" class=\"ngx-ie-btn-secondary\" (click)=\"cancel()\">\u0627\u0646\u0635\u0631\u0627\u0641</button>\n        <button type=\"button\" class=\"ngx-ie-btn-primary\" [disabled]=\"saving()\" (click)=\"save()\">\n          {{ saving() ? '\u062F\u0631 \u062D\u0627\u0644 \u0630\u062E\u06CC\u0631\u0647\u2026' : '\u0630\u062E\u06CC\u0631\u0647' }}\n        </button>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:block}.ngx-ie-state{padding:2rem;text-align:center;color:light-dark(#6b7280,#9ca3af)}.ngx-ie-state--error{color:light-dark(#b91c1c,#f87171)}.ngx-ie-layout{display:flex;flex-wrap:wrap;gap:1.25rem}.ngx-ie-stage-wrap{display:flex;align-items:flex-start;justify-content:center;padding:.5rem;background:light-dark(#f3f4f6,#18181b);border-radius:10px}.ngx-ie-stage{position:relative;touch-action:none;-webkit-user-select:none;user-select:none}.ngx-ie-stage-img{display:block;inline-size:100%;block-size:100%;border-radius:4px;pointer-events:none}.ngx-ie-crop-box{position:absolute;box-sizing:border-box;border:2px solid #2563eb;box-shadow:0 0 0 9999px #00000073;cursor:move;touch-action:none}.ngx-ie-handle{position:absolute;inline-size:14px;block-size:14px;background:#fff;border:2px solid #2563eb;border-radius:50%;touch-action:none}.ngx-ie-handle--nw{inset-inline-start:-7px;inset-block-start:-7px;cursor:nwse-resize}.ngx-ie-handle--ne{inset-inline-end:-7px;inset-block-start:-7px;cursor:nesw-resize}.ngx-ie-handle--sw{inset-inline-start:-7px;inset-block-end:-7px;cursor:nesw-resize}.ngx-ie-handle--se{inset-inline-end:-7px;inset-block-end:-7px;cursor:nwse-resize}.ngx-ie-panel{flex:1;min-inline-size:240px;display:flex;flex-direction:column;gap:.75rem}.ngx-ie-preview{display:flex;align-items:center;justify-content:center;min-block-size:100px;background:light-dark(#f3f4f6,#18181b);border-radius:8px;overflow:hidden}.ngx-ie-preview img{max-inline-size:100%;max-block-size:160px;display:block}.ngx-ie-field{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem;color:light-dark(#374151,#d4d4d8)}.ngx-ie-row{display:flex;gap:.5rem}.ngx-ie-rotate-row button,.ngx-ie-filter-row button{appearance:none;border:1px solid light-dark(#e5e7eb,#33333a);background:light-dark(#ffffff,#232327);color:light-dark(#374151,#d4d4d8);border-radius:999px;padding:.4rem .85rem;font-size:.75rem;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,transform .15s ease,color .15s ease}.ngx-ie-rotate-row button:hover,.ngx-ie-filter-row button:hover{background:light-dark(#f3f4f6,#2c2c31);transform:translateY(-1px)}.ngx-ie-rotate-row button:active,.ngx-ie-filter-row button:active{transform:translateY(0)}.ngx-ie-rotate-row button.active,.ngx-ie-filter-row button.active{background:light-dark(#2563eb,#3b82f6);border-color:light-dark(#2563eb,#3b82f6);color:#fff;box-shadow:0 2px 10px light-dark(rgba(37,99,235,.3),rgba(59,130,246,.3))}.ngx-ie-filter-row{display:flex;flex-wrap:wrap;gap:.4rem}.ngx-ie-actions{margin-block-start:auto;justify-content:flex-end}.ngx-ie-btn-primary,.ngx-ie-btn-secondary{appearance:none;border:none;border-radius:8px;padding:.55rem 1.1rem;font-size:.85rem;cursor:pointer;font-weight:500;transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease}.ngx-ie-btn-primary:hover,.ngx-ie-btn-secondary:hover{transform:translateY(-1px)}.ngx-ie-btn-primary:active,.ngx-ie-btn-secondary:active{transform:translateY(0)}.ngx-ie-btn-primary{background:light-dark(#2563eb,#3b82f6);color:#fff;box-shadow:0 2px 10px light-dark(rgba(37,99,235,.25),rgba(59,130,246,.25))}.ngx-ie-btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}.ngx-ie-btn-secondary{background:light-dark(#e5e7eb,#3f3f46);color:light-dark(#374151,#e4e4e7)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], outputMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputMaxWidth", required: false }] }], outputMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputMaxHeight", required: false }] }], outputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputType", required: false }] }], displayMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMaxWidth", required: false }] }], saved: [{ type: i0.Output, args: ["saved"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgxImageEditorComponent, NgxPointerDragDirective, applyCartoonEffect, canvasToBlob, createWorkingCopy, fitWithin, loadImage, renderComposite, renderRotated };
+//# sourceMappingURL=ngx-kit-image-editor.mjs.map